li action not working when add element from ajax

Question

I have this div

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

and this jquery:

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

when I press on roma the jquery is working good, but when i press on any li that comes from database using jquery, the jquery is not working, this is the jquery which take the data form database and but it in li elements

$(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");
    });
});

I don't think it's duplicate since the question didn't mention `on`. — jcubic, Mar 18 '13 at 15:35
@dystroy how it is duplicated please?, i didn't know that `on` is the problem — Marco Dinatsoli, Mar 18 '13 at 15:49

score 3 · Answer 1 · answered Mar 18 '13 at 15:19

3

Use this :

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

The jQuery set on which you're calling the binding function is computed when you do the binding. When the event is received, it checks the selector you passed as argument. See documentation.

answered Mar 18 '13 at 15:19

Denys Séguret

372,613
87
782
758

yes you right, it works, but what is your way deffer from my way? and why in my way the code just works form static `li` elementns? – Marco Dinatsoli Mar 18 '13 at 15:22
@MarcoDinatsoli The `.click()` method you are using doesn't handle Delegated (future created) bubble events. In this method, `li`'s that are clicked with the parent of `.foodsSection` will trigger this event. – Mark Pieszak - Trilon.io Mar 18 '13 at 15:24

Reflic · Accepted Answer · 2013-03-18T15:31:09.493

2

You have to use .on() instead of .click() because the click method does not work on DOM which has been generated.

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

edited Mar 18 '13 at 15:31

answered Mar 18 '13 at 15:22

Reflic

1,411
15
25

+1 to you ,thank you, i will accept your answer – Marco Dinatsoli Mar 18 '13 at 15:23
Is this a new way of chaining methods? – Ram Mar 18 '13 at 15:29
Oops, no. I have corrected the mistake. – Reflic Mar 18 '13 at 15:30
1

FYI, it doesn't delegate the event. Please see other answers. Edit: now, you should remove the first `li`. – Ram Mar 18 '13 at 15:31

score 1 · Answer 3 · answered Mar 18 '13 at 15:23

Use Delegated events, like

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

See http://api.jquery.com/on/ (and read especially the part about Direct and delegated events, which explains why your code does not work and this code does)

score 1 · Answer 4 · answered Mar 18 '13 at 15:26

The solution will be

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

The problem in your code is, that you attach listeners on each existing 'li' elements at that moment. Otherwise when you use .on('click', 'li', function(){}) you attach your listener to parent element, so it could handle all clicks on it's child

li action not working when add element from ajax

4 Answers4