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元素并在页面加载时属于DOM的target。

Answer 2

上面的代码看起来很好。我刚刚处理了同样的问题而且 thecodeparadox 击中了头部。输入是动态加载的，所以如果我们将代码放在$（document）.ready（function（）{...}之前它就不会起作用。

只需输入此代码......

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

列表是在同一个函数中动态生成的（不是在doc ready函数中）。如果在元素初始化之前创建了on-click函数，那就不行了。

以另一种方式做这件事可能有一个好处：

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

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

Answer 3

尝试'开启'而不是'点击'。

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

jQuery - 单击<ul> </ul> </li>中的<li>时，Click（）不起作用

3 个答案:

注意