2

我正在尝试添加一个链接以使用 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(){ });

有没有人看到这里可能出了什么问题或有其他方法可以建议？

4

4 回答 4

4

看起来您正在动态加载元素。您只能绑定到当前存在于 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
});

如果#sortor tbodyof$("#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.
    });
});
于 2012-09-27T20:22:44.400 回答
2

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

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

      /* row deletion */
    $(".deletelink").click(function(){ ....
     });
   });
于 2012-09-27T20:34:04.567 回答
0

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

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

    e.preventDefault();

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

于 2012-09-27T20:24:06.197 回答
0

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

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

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

于 2012-09-27T20:26:33.757 回答