0

我正在尝试使用 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 会感到困惑。有人可以解释我要去哪里错了吗？

4

2 回答 2

7

改变：

$("#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

于 2012-11-19T23:09:21.503 回答
0

那这个呢？这只会删除按钮.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();
});
于 2012-11-19T23:12:37.343 回答