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
});

在jQuery 1.7中添加了

on()。如果您使用的是先前版本但高于1.4.2，则可以改为使用delegate()。

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

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

如果#sort的{{1}}或tbody也是动态的，那么$("#sort tbody")也会起作用，但距离$("document").on("click", "#sort tbody .deletelink", function(){...})更近的距离会更好。< / p>

修改
我只是再次查看您的代码，委托绑定应该可以工作，但是，使用load()的成功回调也应该与您现有的代码一起使用。

执行回调已成功完成加载。我不是100％肯定，但我假设当调用成功时元素已经加载到DOM中，因此正常的绑定应该有效。

如果这不起作用，上面提到的动态绑定应该是。

document

Answer 2

要确保表格已满载，请尝试在.load()的回调中声明点击功能，

      $("#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树。所以谨慎使用

用于单击指向ajax调用的链接的事件处理程序

4 个答案: