jQuery - 单击 中的 时，Click() 不起作用

Question

尝试单击动态生成的列表中的项目，但 $.click()函数只是不会触发。

列表的 HTML:

<div>
    <ul id="site_list"> </ul>
</div>

jQuery 生成列表(按预期工作，生成具有所需类属性的长数据列表):

var sites =[];
    $.getJSON("php/ABC.php", function(result){
        $.each(result.Sites, function(i,v){
            sites.push('<li class="site" id="site_'+ ABC + '</li>');
        });

        $('#site_list').append(sites.join(''));
    });

单击列表时触发 jQuery(不起作用...它不会抛出错误...只是无法响应。我也尝试过 $('#site') ，但无济于事。我怀疑它是由于我用来生成 <ul> 的方法......某些东西阻止 DOM 正确识别 UL 内的每个元素。:

$('li').click(function(){
    $(this).toggleClass("site_selected");
});

Answer 1

$('#site_list').on('click', 'li', function(){
    $(this).toggleClass("site_selected");
});

当您动态添加 li 时，您需要将事件处理程序委托(delegate)给 li。

<小时/>

注意

.on() 的委托(delegate)事件结构如下:

$(container).on(eventName, target, handlerFunction)

这里的container指向一个Static-element，它包含target元素并且在页面加载时属于DOM。