添加时jQuery冲突（？）&；除锂

我有这样一个表结构：

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

$（文档）。在（“单击”，“表tr td”，函数（）上）{
var parul=$（this.children（“ul”）；
$（'li class=“check”>）。附录（parul）；
});
$（文档）。在（“单击”，“li.check”，函数（）上）{
$（this.sides（“：last”）.remove（）；
});

这个表是由jQ动态生成的，所以我尽量避免在选择器中使用id。还有为什么我要使用.on（），因为据我所知，它将应用于不一定存在的LIs（如果我理解不正确，请纠正我！）

我发现上述两个函数独立工作，但当我取消注释这两个函数时，只有“adding”函数工作，remove函数不工作

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

---

提前谢谢

当您单击

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

$（函数（）{
$（文档）。在（“单击”、“li.check”功能上（e）{
$（this.sides（“：last”）.remove（）；
e、 停止传播（）；
});
$（文档）。在（“单击”，“表tr td”，函数（）上）{
var parul=$（this.children（“ul”）；
$（'li class=“check”>）。附录（parul）；
});
});

演示：

---

这将防止在处理

li

单击后调用第二个处理程序

我想你会发现这对你很有用：

相关JS代码：

$("table").on("click", "td", function(e) {
    e.stopPropagation();
   var parul = $(this).children("ul");
   $('<li class="check">LI TAG</li>').appendTo(parul);
});

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

$（“表”）。在（“单击”、“td”上，函数（e）{
e、 停止传播（）；
var parul=$（this.children（“ul”）；
$（'li class=“check”>li标签）。附录（parul）；
});
$（“表”）。在（“单击”、“li”上，函数（e）{
e、 停止传播（）；
$（this.sides（“：last”）.remove（）；
});

在使用on或delegate时，出于性能原因，您的目标元素（在示例文档中，在我的表中）应该尽可能靠近您正在侦听的事件的元素

---

在fiddle中，我添加了css和文本，以使元素“可见”，以便于演示。

当我在尝试您的代码时，我得到了预期的行为——即，两个处理程序都在运行，另外，请注意，如果您正在单击的LI是最后一个，即“最后一个兄弟”，则删除最后一个LI可能会产生意外的结果现在是列表中倒数第二个LI。@mblase75我刚刚在一堆LI中添加了一些顺序id，我明白你在单击最后一个LI时的意思。我目前也无法删除最后一个li。所有LIs都是等效的。是否有更好的方法来实现这一点，以便我始终可以保证，如果表单元格的ul中存在li，它将能够被删除？提前谢谢。我会试试：

$（this）.parent（）.children（）.last（）.remove（）

@mblase75谢谢你。它实现了我想要的，而且更容易！请注意，

.delegate（）

已被jQuery 1.7+中的

.on（）

取代。在日常作业的最后6个月内，您一直在使用moo；）谢谢你的提示。刚到jq，但考虑性能永远不会太早。感谢这一点，它按照我的预期工作，我也学到了一些东西。干杯