JQuery .load（）使內容在加載後無法點擊

我有一個頁面，其中有一個div。來自該div的內容正在被包含頁面填充，並且該頁面正在調用數據庫來檢索內容。JQuery .load（）使內容在加載後無法點擊

當用戶單擊「添加任務」按鈕時，將進行ajax調用以將內容插入到數據庫中，並使用.load（）刷新顯示所有任務的div。「刪除任務」也會發生同樣的過程。另一個Ajax調用將從adatabase中刪除一行，並使用.load（）刷新div。

我看到我的數據庫表中的插入和刪除，但前端有點不習慣。當頁面第一次加載時，我可以執行無限數量的「添加」操作，並且所有新任務都顯示在div中。但是，我只能做一個「刪除」操作;在第一次嘗試後，我似乎無法從div中選擇一個元素。

這裏的「添加」代碼：

$("#accept_new_task").click(function(){ 
    jQuery.ajaxSetup({async: false}); 

    //Make ajax call 
    $.post("[url]", { [data] }, 

     //If successful, add a new item to task list and clear input 
     function(data) { 

      //Clear input 
      $("#new_task_name").val(''); 
      $("#new_task_description").val(''); 

      //Show new task 
      $('#newly_added_tasks').load('[page on server]', function() { 
      });    



     }); 

    jQuery.ajaxSetup({async: true});  
});

和「刪除」代碼：

//Deletes recently added task 
$(".newtask").click(function(){ 
    alert('!'); //to test 
    var val = $(this).attr('value'); 

    jQuery.ajaxSetup({async: false}); 

    //Make ajax call 
    $.post("[url]", { [data] }, 

     //If successful, refresh div 
     function(data) { 
      $('#newly_added_tasks').load('[page on server]', function() { 
       alert('Load was performed.'); 
      });        
     });  

    jQuery.ajaxSetup({async: true}); 

});

正在被加載的內容是從數據庫調用提取的內容生成的表。這裏有一個片段：

<td>'.$task[$i]['name'].'</td> 
<td>'.$task[$i]['description'].'</td> 
<td><input type="button" class="newtask" name="accept_new_task" id="task_'.$task[$i]['task_id'].'" value="'.$task[$i]['task_id'].'"></td>

任何幫助，將不勝感激。

來源

2012-01-25 Bad Programmer

工作，確保您分配或重新分配事件處理程序元素都被加載到頁面後 – Evan

jQuery .click事件不是一個活動事件，因此它只會將它分配給可點擊的項目。一旦這些項目刷新，刪除或新項目進來，刷新的項目將不會有點擊事件，新項目不會有點擊事件。

您需要使用jQuery .on事件，該事件替代了.live事件。這樣當內容刷新時，他們仍然會附加一個點擊事件。

另一種選擇是在內容刷新時分配點擊事件。

來源

2012-01-25 20:02:02

改變這一行

$(".newtask").click(function(){

到

$(document).on(".newtask","click",function(){

或使用委託

$(document).delegate("click",".newtask",function(){

原因是動態添加的元素沒有得到自己附加到事件處理程序使用on如果您正在使用jQuery 1.7+使用別的delegate

來源

2012-01-25 20:03:28 Rafay

它會與此

或

$(document).delegate(".newtask","click",function(){

來源

2013-10-25 19:00:43 user2921251

JQuery .load（）使內容在加載後無法點擊

回答

相關問題