Question

我有这个div

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

和这个jquery：

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

当我按下roma jquery工作正常时，但是当我按下来自数据库的任何li使用jquery时，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");
    });
});

Answer 1

使用此：

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

当您执行绑定时，将计算您调用绑定函数的jQuery集。收到事件时，它会检查您作为参数传递的选择器。请参阅documentation。

Answer 2

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

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

Answer 3

使用委托事件，例如

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

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

Answer 4

解决方案将是

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

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

从ajax添加元素时，li动作不起作用

4 个答案: