CODEWITHSUNDEEP
javascriptjqueryhtmlevents
Alnedru
Alnedru

Reputation: 2655

JQuery bind event after adding element dynamic

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 :/

Upvotes: 1

Views: 4121

Answers (3)

Satpal
Satpal

Reputation: 133453

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 () {
    ...
});

Upvotes: 5

NiGhTTraX
NiGhTTraX

Reputation: 56

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.

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388446

need to use event delegation to support dynamic elements

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

Upvotes: 1

Related Questions