Question

我正在尝试使用jQuery删除表中的行。该表将按钮显示为一行中的第一项。单击该按钮应该从MySQL表中删除该行。

这是javascript代码

      $("#list .del").click(function() {
      cell = $(this);
      row  = cell.closest("tr");
      vid = row.find (".vid");
      alert (vid.text());

      $.post ("db_deleteplayer.php",
        {vid:vid.text()},
        updateSignup);
      return;

    }) //#list .del click      


    function updateSignup(data) {
        $('#list').html(data);
      return;
    }

这适用于我想要删除的第一行但之后失败。我已经在Firefox，Chrome和IE中证实了这一点。

我的猜测是第一次删除是修改DOM而jQuery变得混乱。有人可以解释我哪里出错吗？

Answer 1

更改：

$("#list .del").click(function({

到：

$("#list").on('click', '.del', function(){

基本上，当您调用$('#list').html(..)时，您正在替换#list中的元素，并且这样做会删除以前绑定的事件处理程序。

通过替换.on('click', '.del', function...，您将处理程序附加到#list，它始终保留在DOM中（在您的示例中）。然后，处理程序检查事件原始目标，查看它是否具有类.del，并执行处理程序（如果有）。

详细了解委派活动：https://stackoverflow.com/a/8111171/1238887

Answer 2

这个怎么样？这将只删除按钮.del所在的行（因此它不会实际更新它）。当然，这取决于你的设置是否可以找到它有用，但如果.del在行内，它应该可以正常工作。

$("#list .del").click(function(e) {
    var row = $(this).closest("tr");
    $.post(
        "db_deleteplayer.php",
        {
            vid: row.find(".vid").text()
        },
        function(data) {
            row.remove();
        }
    );

    e.stopPropagation();
    e.preventDefault();
});

jQuery - 删除表中的行

2 个答案: