jQuery - 单击<ul>中的<li>时,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动态添加时,你需要委托事件处理程序li.

注意

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

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

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