Question

面对jquery不允许选择附加元素的问题。我已经看到很多建议如何解决它。例如：

var $li = $('<li><span>' + html + '</span></li>');
$('.top').append($li);

但它无法帮助我。我从json格式的数据库中获取记录的服务器列表，在我的视图中，我循环使用此列表并生成一些html结构。

例如：

$.getJSON( "/searchbytype", data, function( data ) {
    $.each( data, function( key, val ) {
        $('items').append('<li class="item">'+ val.name + '</li>');
    });
});

接下来我要做的就是点击一些li项目并进行一些操作。 Ul列表可能包含100-200个li标记。任何想法将不胜感激！

Answer 1

我认为你需要事件委托

$('body').on('click', 'li', function(){
   // this handler will work even for dynamically created <li>
});

Answer 2

你可以这样做：

$.getJSON("/searchbytype", data, function (data) {
    $.each(data, function (key, val) {
        $('<li>', {
            class: 'item'
        }).html(val.name).on('click', function () {
            // Your code here.
        }).appendTo('.items');
    });
});

注意：我假设容器是class等于items的元素，因此我添加了一个丢失的.在jQuery选择器中添加前缀。

jquery选择附加元素

2 个答案: