JQuery append click

Question

I have a strange problem with JQuery when I try to click on append element that is inside timeout function I got the following code:

function generate(){
    box = shuffle(box);
    console.log(box);
    $("#game").empty();
    for (var i = 0; i < 4; i++) {
        $("#game").append("<div class=box>" + box[i] + "</div>");
    }
}

function lvl1(){
    box = shuffle(box);
    console.log(box);
    $("#game").empty();
    for (var i = 0; i < 4; i++) {
        $("#game").append("<div class=box>" + box[i] + "</div>");
    }
}

generate();

setTimeout(function(){
    lvl1();
}, 1000);

$(".box").click(function(){
    alert("OK");
});

If I try to click on box within a 1 sec the alert is showed correctly but if I try to click after the timeout it does nothing also no error is showing

http://jsfiddle.net/f4kgvaL5/

Can you create a fiddle with all your code and html...easier to help you jsfiddle.net — Scott Mitchell
– Scott Mitchell, Commented Aug 10, 2014 at 16:24
Please take the time to format your code correctly. It makes it much easier for you and others to read. — Rory McCrossan
– Rory McCrossan, Commented Aug 10, 2014 at 16:27
Why are you expecting clicking on .box to do anything other than show an alert? — Rory McCrossan
– Rory McCrossan, Commented Aug 10, 2014 at 16:28
Well thats the problem it doesn't show after timeout fire lvl1 — user3887640
– user3887640, Commented Aug 10, 2014 at 16:28

Rory McCrossan · Accepted Answer · 2014-08-10 16:30:04Z

2

The .box elements are being appended dynamically, so you need to use a delegated event:

$("#game").on('click', '.box', function () {
    alert("OK");
});

Updated fiddle

answered Aug 10, 2014 at 16:30

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Scott Mitchell Over a year ago

I think I won by 6 seconds :P

user3887640 Over a year ago

Why the first one works but one inside setTImeOut don't?

Rory McCrossan Over a year ago

I would imagine it's because the first group of .box elements are available to the DOM on page load. Subsequent sets are loaded via AJAX.

Scott Mitchell Over a year ago

Yes this is correct. When you call generate you initialize the first set of box elements then you attach the event to them. However subsequent calls you dont attach the event so the alert is never fired.

Scott Mitchell · Accepted Answer · 2014-08-10 16:29:56Z

1

This looks like an event delegation issue. On the new boxes created during lvl1 you arnt assigning the event handler again.

Try

$( "#game" ).on( "click", ".box", function(){
    alert("OK");
});

answered Aug 10, 2014 at 16:29

Scott Mitchell

6984 silver badges11 bronze badges

Comments

Devendra Soni · Accepted Answer · 2014-08-10 16:31:35Z

0

see the code:-

 $(document).on("click",".box",function(){
            alert("OK");
 });

working example:- http://jsfiddle.net/f4kgvaL5/2/

thanks

answered Aug 10, 2014 at 16:31

Devendra Soni

1,93412 silver badges16 bronze badges

Collectives™ on Stack Overflow

JQuery append click

3 Answers 3

4 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Related