3

尝试单击动态生成的列表中的项目，但该$.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')，但无济于事。我怀疑这是由于我的方法m 用于生成<ul>...某事正在阻止 DOM 正确识别 UL 中的每个元素。：

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

3 回答 3

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

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

笔记

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

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

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

于 2012-06-18T16:20:46.843 回答
1

上面的代码看起来不错。我刚刚处理了同样的问题，代码悖论一针见血。输入是动态加载的，所以如果我们在 $(document).ready(function(){...} 存在之前将该代码放入，它将无法工作。

只要把这段代码...

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

在同一函数中动态生成列表之后（不在文档就绪函数中）。如果在元素初始化之前创建了点击功能，那就不行了。

以另一种方式执行此操作可能会有优势：

    $('#site_list').on('click', 'li', function(){

然而，它对我来说很好用......

于 2016-02-18T01:30:36.023 回答
0

尝试“打开”而不是“点击”。

$('li').on('click', function(){ $(this).toggleClass('site_selected') } );
于 2012-06-18T16:20:41.957 回答