添加和删​​除 li 元素时的 jQuery 冲突(?)

Question

我有一个这样的表结构:

<table>
  <tr>
    <td>
      <ul>
        <li class="check"></li>
      </ul>
    </td>
    <td>
      <ul>
        <li class="check"></li>
        <li class="check"></li>
      </ul>
    </td>
  </tr>
</table>

我的目标是，在表格单元格内单击时，另一个 li 元素将添加到每个单元格内的单个 ul 中。单击 li 元素时，单元格 ul 中的最后一个 li 将被删除。

这是我尝试过的 jq:

$(document).on("click", "table tr td", function() {
   var parul = $(this).children("ul");
   $('<li class="check">&nbsp;</li>').appendTo(parul);
});

$(document).on("click", "li.check", function(){
   $(this).siblings(":last").remove();
});

该表是由 jQ 动态生成的，因此我试图避免在选择器中使用 ID。另外，为什么我使用 .on()，因为据我了解，它将适用于不一定存在的 LI(如果我理解不正确，请纠正我!)。

我发现上述两个函数独立工作，但是当我取消注释它们时，只有“添加”函数起作用，而删除则不起作用。

我是 jQ 的新手，所以这真是一个谜。如果有一个完全不同的解决方案可以实现相同的目标，我不会介意，但出于学习目的，我还想了解为什么我的代码不能按我的预期工作。

提前致谢!

Answer 1

当您点击 li 时，td 也会记录一次点击。您需要在 li 处理程序上添加 stopPropagation():

$(function() {
    $(document).on("click", "li.check", function(e) {
        $(this).siblings(":last").remove();
        e.stopPropagation();
    });

    $(document).on("click", "table tr td", function() {
        var parul = $(this).children("ul");
        $('<li class="check">&nbsp;</li>').appendTo(parul);
    });
});

演示:http://jsfiddle.net/uLCRd/

这将阻止在处理 li 点击后调用第二个处理程序。