Question

我正在尝试使用动态添加的内容，但我不确定我缺少什么。我有两个按钮，一个在DIV内创建UL。然后我点击另一个按钮在UL内创建LI。点击任何一个LI我应该收到一条警告信息，但什么也没发生！

<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

您应该将on与#ok div绑定。像这样：

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

您的ul也是动态创建的，因此无效。 on应该在加载时绑定到页面上已有的元素。

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事件绑定到新元素，否则它将无效。

使用on（）jquery获取动态内容

3 个答案: