使用on（）jquery動態內容

Question

我想在動態添加的內容上使用，我不知道我錯過了什麼。我有兩個按鈕在DIV內創建UL。然後我點擊另一個按鈕在UL中創建LI。點擊任何LI我應該會收到一條警告消息，但沒有任何事情發生！

http://jsfiddle.net/EkW63/

<div id='ok'></div> 
<button id='fst'>create ul</button> 
<button id='snd'>create li</button> 

<script> 
$("#fst").click(function(){ 
    $("#ok").html("<ul class='ul'></ul>"); 
}); 
$("#snd").click(function(){ 
    $(".ul").html("<li class='myclass'>one</li><li class='myclass'>two</li>"); 
}); 

$("ul").on('click', 'li.myclass', function(){ alert('ok'); });` 
</script> 

什麼建議嗎？

Answer 1

使用這樣

$(document).on('click', 'ul li.myclass', function(){ 
    alert('ok'); 
}); 

甚至更​​好（意見）

$("#fst").click(function(){ 
    $("#ok").html("<ul class='ul'></ul>"); 
}); 

var li = $("<li class='myclass'>one</li><li class='myclass'>two</li>"); 
$("#snd").click(function(){ 
    $(".ul").html(li); 
}); 

li.on('click', function() { 
    alert('hi'); 
}); 

對於整體更好的代碼編寫所有的像類似這樣的

$("#fst").click(function(){ 
    $("#ok").html('').append(
     $('<ul>', {'class': 'ul'}) 
    ); 
}); 

var li = $('<li>', { 
    'class': 'myClass', 
    click: function() { 
     alert('Hello'); 
    } 
}), 

$("#snd").click(function(){ 
    $(".ul").html('').append(li); 
}); 

我用append，因爲它是更快，比innerHTML

Answer 2

您應該將on與#ok div綁定。就像這樣：

$("#ok").on('click', 'li.myclass', function(){ alert('ok'); }); 

你ul是動態創建的，以及因此將無法正常工作。 on應該綁定到加載時頁面上已存在的元素。

Answer 3

由於您正在動態創建元素，因此您需要在創建元素後立即將click事件綁定到新元素，否則它將無法工作。