使用內容可編輯提交與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>標籤與jQuery的本身（動態創建的HTML）類taskText類，這就是爲什麼你必須綁定事件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/