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

您的选择器错误，因为$li不是变量或有效选择器：

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

的

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

您需要如何触发diferens事件使用clase：

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

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

Live Demo Live Demo 2

说明 stopPropagation：阻止事件冒泡DOM树，防止任何父处理程序被通知事件。

Answer 2

您需要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");
});

小提琴：http://jsfiddle.net/W68sa/1/

点击嵌套创建的元素时出现jQuery问题

2 个答案: