用于单击 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(){ });

有没有人知道这里有什么问题或者有其他方法可以建议？

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 tbody") 中的#sort 或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

为确保表格完全加载，尝试在.load()的回调中声明点击函数@like，

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

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

Answer 3

尝试使用 .on() 将事件绑定到元素

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

    e.preventDefault();

还要确保添加 preventDefault 以停止链接的默认功能

Answer 4

问题是您的删除链接在表格加载后出现。因此，当页面加载并构建 DOM 树时，它并不存在。所以你不能给它附加click。 你可以试试live()。这可以用作

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

该函数在元素被引入 DOM 后附加事件。然而，这个函数有点贪心，因为它会在任何 DOM 更改时不断扫描整个 DOM 树。所以慎用