單擊鏈接到Ajax調用的事件處理程序

Question

我想添加一個鏈接來刪除使用jquery和ajax的mysql數據庫中的一行。數據當前顯示在一個表格中。出於某種原因，Click事件不會觸發。

這裏是我的AJAX調用：

<script> 
$(document).ready(function() { 
/* load table with page load*/ 
$("#sort tbody").load("inc/index_table.php"); 

/* row deletion */ 
$(".deletelink").click(function(){ 
    var id = $(this).attr("id"); 
    $.ajax({ 
     beforeSend: function (request) { 
     var answer = confirm("Are you SURE you want to delete this?/nThis action is NOT reversible.") 
     if (answer){ return(true); } 
     else { return(false); } 
     }, 
     type: "POST", 
     url: location.href, 
     data: "delete="+id, 
     error: function() { 
      console.log("Theres an error with AJAX deletion"); 
     }, 
     success: function(){ //a.td.tr.remove just that row rather than the whole table 
      $this.parent().parent().remove(); 
      console.log("Deleted."); 
     } 
    }); 
}); 

}); 
</script> 

和相關的HTML： 這是一個while循環，從我的數據庫打印表的一部分：

<td><a class="deletelink" id="'.$row["id"].'"><img src="images/delete.png" alt="Delete"></a></td>';

我的代碼指定<a class="deletelink">但它沒有註冊$(".deletelink").click(function(){ });

有沒有人看到w帽子在這裏可能是錯的，或者有其他方法建議？

Answer 1

看起來像是在動態加載元素。您只能綁定到DOM中當前存在的元素。要綁定到您即將添加的元素，您必須將該事件附加到一個靜態元素，它越接近動態內容越好。

嘗試使用on()與委託。

$("#sort tbody").load("inc/index_table.php"); 

/* row deletion */ 
$("#sort tbody").on("click", ".deletelink", function(){ 
    //...rest of code the same 
}); 

on()被添加到jQuery 1.7中。如果您使用的是以前的版本，但高於1.4.2，則可以使用delegate()代替。

$("#sort tbody").load("inc/index_table.php"); 

$("#sort tbody").delegate(".deletelink", "click", function(){ 
    //...rest of code the same 
}); 

如果#sort或$("#sort tbody")tbody也是動態的，然後$("document").on("click", "#sort tbody .deletelink", function(){...})會工作爲好，但任何超過document接近不如斷過程。

編輯
我只是在你的代碼看一次，委託綁定應該工作，但是使用load()的成功回調應該與你現有的代碼工作了。

回調被執行一個加載已成功完成。我不是100％肯定的，但我假設，當成功被稱爲元素已被加載到DOM，因此正常的綁定應該工作。

如果這不起作用，上面提到的動態綁定應該。

$("#sort tbody").load("inc/index_table.php", function(){ 
    /* row deletion */ 
    $(".deletelink").click(function(){ 
     // .. your code as before. 
    }); 
}); 

Answer 2

嘗試使用。對（）將事件綁定到元素

$(".deletelink").on('click',function(e){ 

    e.preventDefault(); 

同時一定要增加的preventDefault停止鏈接

Answer 3

的問題是默認的功能您的刪除鏈接出現在表格加載後。所以當頁面被加載並且DOM樹被建立時，它不在那裏。所以你不能附加click。 您可以嘗試live()。這可以用作

$(".deletelink").live('click',function(){ 
    // ajax call handling code here 
}); 

該函數在元素被引入到DOM後附加事件。然而，這個函數有點貪婪，因爲它在任何DOM變化上都會繼續掃描整個DOM樹。所以謹慎

Answer 4

使用，以確保該表滿載，試圖聲明點擊功能，在​​像回調，

 $("#sort tbody").load("inc/index_table.php", function() { 

     /* row deletion */ 
    $(".deletelink").click(function(){ .... 
    }); 
    });