javascript - 使用 content editable 通过 ajax 和 PHP 提交更改

Question

我有一个动态生成多行的页面，其中包含 <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领域并使其发挥作用？

Answer 1

因为您正在创建 <p>标签类 taskText来自 jquery 本身的类(动态创建的 html)，这就是为什么你必须绑定(bind)事件 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/