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

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

试试这个：

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

OR

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

在此处查看更多内容： - http://api.jquery.com/on/

使用可编辑的内容通过ajax和PHP提交更改

1 个答案: