帶有點擊嵌套創建元素的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/