JQuery bind event after adding element dynamic

Question

I have an issue after adding a element dynamically it doesn't have the click event, so i have the following:

$(".myclass > li").click(function () {
 ...
});

so basically when i click on LI element something should happen and it works.

But when i add a new LI element to myclass which is UL element, this newly added element doesn't call this function.

My question how do i rebind or bind this newly element to this function ..?

Because the other elements when i click on them they work, but only the new element doesn't ... i suppose it is that the binding happens on postback or somethnig but in my case there is no postback :/

• Barmar: possible duplicate of Event binding on dynamically created elements?
• Barmar: How did you miss that question, the title is almost identical to yours?
• Barmar: And when I simply type your title into the Ask Question page, dozens of other identical questions show up in the suggestion box.

Answer 1

You need to use Event Delegation. You have to use .on() using delegated-events approach.

i.e.

$(document).on('event','selector',callback_function)

In your case

$(document).on('click', '.myclass > li', function () {
 ...
});

OR if you want to apply to ALL list items:

$(".myclass").on('click', '> li', function () {
 ...
});

Answer 2

need to use event delegation to support dynamic elements

$(".myclass").on('click', '> li' function () {
 ...
});

Answer 3

Since the element is added after you bind the event, it doesn't have the handler attached and the bind function doesn't listen for any new elements that might be added.

Thus, you need to use event delegation. When an event triggers, it will bubble up all the way to the parent document. Using the jQuery .on() function you can listen for events that have bubbled up from their target.

In your case, you should use the following:

$(parent).on("click", "li", function() { ... });

The above will listen for click events that occur on li elements and bubble up to parent. Inside the event handler this will refer to the li element on which the event triggered. In case you don't know the parent, you can listen on document.

You can learn more about the .on() function here.