jQuery .on('click') won't work on future added elements

Question

I have some Javascript code that executes a function whenever an element with a condition is clicked. The problem is that if a new element of that kind is added later on, it won't detect it by the code. This is my code:

$("li[data-episode]").on('click', function () {
    setTimeout(Aradmey_Later, check_timeout);
});

How can I fix it so it always works, even on future elements?

http://stackoverflow.com/a/15090957/4028085 – brso05 May 21 '15 at 13:45 — brso05, May 21 '15 at 13:45

score 1 · Answer 1 · answered May 21 '15 at 13:42

1

You have to use $(document) since they are dynamically added controls

$(document).on('click', "li[data-episode]", function () {
    setTimeout(Aradmey_Later, check_timeout);
});

answered May 21 '15 at 13:42

Guruprasad J Rao

29,031
13
99
190

score 1 · Accepted Answer · answered May 21 '15 at 13:43

1

You are on the right track. But you should delegate it with a container element or object like document

$(document).on('click', 'li[data-episode]', function () {...});

answered May 21 '15 at 13:43

AmmarCSE

29,061
5
39
52

Thank you! It worked like a charm. – Omer Aviv May 21 '15 at 13:46
1

@OmerAviv, glad it helped :). Just a tip, you should vote/accept answers that have helped to guide future readers of this post. – AmmarCSE May 21 '15 at 13:51
Will do, gotta wait two more minutes though. – Omer Aviv May 21 '15 at 13:54

jQuery .on('click') won't work on future added elements

2 Answers2