从ajax添加元素时li动作不起作用[重复]答案

【问题标题】：li action not working when add element from ajax [duplicate]从ajax添加元素时li动作不起作用[重复]
【发布时间】：2013-03-06 23:54:20
【问题描述】：

我有这个 div

<div class="foodsSection">
    <label>
        Foods:
    </label>
    <ul>
        <li>
            roma
        </li>
    </ul>
</div>

还有这个 jquery：

$(".foodsSection li").click(function(){
        $(".addressesSection").css("display","block");
    });

当我按下roma 时，jquery 运行良好，但是当我按下来自使用 jquery 的数据库的任何 li 时，jquery 不工作，这是采用数据表单数据库的 jquery，但是它在li 元素中

$(document).ready(function(){
    $(".RestauranstSection li").click(function (){
        var divYourOrder = $(".YourOrder");
        var li = $(".OMRestaurants li");
        $(".foodsSection").css("display", "block");
        var restaurantID = 8;
        var foodDive = $(".foodsSection ul");
        foodDive.html("");
        var lis = '';
        $.getJSON("http://localhost/TheEatTel/Food/getFoodForRestaurant/"+restaurantID+"/TRUE",function(data){
            for(var i=0;i<data.length;i=i+3){
                lis +="<li id='"+data[i+2]+"'>"+"<label>"+data[i]+"</label> <label>"+data[i+1]+"</label></li>";
            }
            lis+="";
            foodDive.html(lis);    
        });
    });
    $(".foodsSection li").click(function(){
        $(".addressesSection").css("display","block");
    });
});

【问题讨论】：

我不认为这是重复的，因为问题没有提到on。
@dystroy 它是如何复制的？，我不知道on 是问题

标签： javascript jquery html

【解决方案1】：

使用这个：

$(".foodsSection ul").on('click', 'li', function(){

您调用绑定函数的 jQuery 集是在您进行绑定时计算的。收到事件后，它会检查您作为参数传递的选择器。见documentation。

【讨论】：

是的，您说得对，它有效，但是您的方式与我的方式有何不同？为什么以我的方式代码只能从静态li elementns 工作？
@MarcoDinatsoli 您正在使用的.click() 方法不处理委托（未来创建的）气泡事件。在这个方法中，.foodsSection的父级点击的li会触发这个事件。

【解决方案2】：

您必须使用 .on() 而不是 .click() 因为 click 方法不适用于已生成的 DOM。

$(".foodsSection li").on("click", 'li' ,function(){
    $(".addressesSection").css("display","block");
});

【讨论】：

+1 给你，谢谢，我会接受你的回答
这是一种链接方法的新方式吗？
糟糕，没有。我已经纠正了错误。
仅供参考，它不委托事件。请查看其他答案。编辑：现在，您应该删除第一个 li。

【解决方案3】：

使用委托事件，例如

$(".foodsSection").on("click", "li", function(){
    $(".addressesSection").css("display","block");
});

请参阅http://api.jquery.com/on/（并特别阅读有关直接和委托事件的部分，它解释了为什么您的代码不起作用而此代码起作用）

【讨论】：

【解决方案4】：

解决办法是

$('.foodsSection').on('click', 'li', function() {
});

您的代码中的问题是，您当时在每个现有的“li”元素上附加了侦听器。否则，当您使用 .on('click', 'li', function(){}) 时，您会将侦听器附加到父元素，这样它就可以处理对其子元素的所有点击

【讨论】：