带有点击嵌套创建元素的jQuery preblems

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> 

的第二代码片段是我使用生成的元素和分配一个click事件的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

你的选择是错误的，becoue $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事件使用类别：

// $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/