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也会点击一次点击。您需要在stopPropagation()处理程序上添加li：

$(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点击后调用第二个处理程序。

Answer 2

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

http://jsfiddle.net/6BhKs/2/

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

当使用on或delegate你的目标元素时（在你的示例文档中，在我的表中）应该尽可能接近你正在监听事件的元素，这是出于性能原因。

在小提琴中，我添加了css和文本，使元素“可见”用于演示目的。

添加＆amp;时jQuery冲突（？）删除li元素

2 个答案: