javascript - jQuery 问题与点击嵌套创建的元素

Question

我使用 JavaScript 创建了以下 html，我希望能够监听 channel_li 和 client_li 上的点击。

生成的 HTML

<li cid="4" class="channel_li" style="display: list-item;">Random<ul class="client_ul">
    <li class="client_li" clid="14" style="">Hanekawa</li></ul>
</li>

第二个代码片段是我用来生成元素并分配点击事件的 JavaScript。我遇到的问题是，当我单击 channel_li 时没有任何反应，而当我单击 client_li 时，它会触发 channel_li 监听器。有办法解决这个问题吗？

JS

// Some generation code here.

// $li here is the created channel_li element.
$($li).on("click", "li", function() {
    console.log("channel click");
});

// More generation code.

// $foo here is the client_li element.
$($foo).on('li', 'click', function () {
    console.log("client click.")
});

Answer 1

您将需要 stopPropagation(): http://api.jquery.com/event.stoppropagation/ ，因为嵌套元素是有问题的。

$(document).on("click", "li.channel_li", function() {
    alert("channel click");
});

$(document).on("click", "li.client_li", function(e) {
  e.stopPropagation();
    alert("client click");
});

fiddle :http://jsfiddle.net/W68sa/1/