使用内容可编辑来提交ajax和PHP的更改 - Using content editable to submit changes with ajax and PHP

Using content editable to submit changes with ajax and PHP

本文关键字：ajax PHP 提交编辑 | 更新日期: 2023-09-27

我有一个页面，它动态生成包含<p contenteditable="true">的多行。我想在blur事件中提交对该字段的更改。我使用HTML data属性为每个字段分配一个数字，使其唯一。

这是我的代码，这样你就可以明白我的意思了。

PHP-这会动态生成字段

 $row = ''; 
    while($row = mysqli_fetch_array($results)) {
        echo '<tr><td class="columnButton vertAlign"><button data-complete="'.$row['id'].'" class="btn btn-success btn-sm completeTask" action="completeTask" method="POST">Complete</button></td><td class="vertAlign"><div class="task"><p class="taskText" data-task="'.$row['id'].'" contenteditable="true">'.$row['list'].'</p></div></td><td class="vertAlign columnButton"><button method="POST" action="delete" type="submit" class="deleteTask btn-sm btn btn-danger pull-right" data-id="'.$row['id'].'">Delete</button></td></tr>';
    }

jQuery-这将处理AJAX POST

var dataTask = $(this).attr('data-task');
    $('.taskText').on('blur', function(){
        alert(dataTask);
    });

我正试图使用alert来显示blur事件正在工作，但它不工作。如果我能让这个警报与每个contenteditable字段一起工作，我就能让我的AJAX工作。如何将此事件分配给每个contenteditable字段并使其工作？

因为您要从jquery本身（动态创建的html）创建具有类taskText类的<p>标记，所以必须绑定事件blur，如下所示：

试试这个：

$(document).on('blur','.taskText',function(){
   var dataTask = $(this).attr('data-task');
   alert(dataTask);
});

或

$('body').on('blur','.taskText',function(){
   var dataTask = $(this).attr('data-task');
   alert(dataTask);
});

点击此处查看更多信息：-http://api.jquery.com/on/