jquery - 使用 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

You should bind on with #ok div. Like this:

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

Your ul is dynamically created as well so it will not work. on should be bound to elements that are already on the page when it loads.

Answer 2

像这样使用

$(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 3

由于您是动态创建元素，因此您需要在创建新元素后立即将 click 事件绑定到新元素，否则将无法正常工作。