javascript - JQuery bind event after adding element dynamic - Stack Overflow

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

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

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

Share Improve this question asked Feb 1, 2014 at 13:09 AlnedruAlnedru 2,6559 gold badges53 silver badges92 bronze badges 3
  • possible duplicate of Event binding on dynamically created elements? – Barmar Commented Feb 1, 2014 at 13:10
  • 1 How did you miss that question, the title is almost identical to yours? – Barmar Commented Feb 1, 2014 at 13:11
  • 1 And when I simply type your title into the Ask Question page, dozens of other identical questions show up in the suggestion box. – Barmar Commented Feb 1, 2014 at 13:13
Add a ment  | 

3 Answers 3

Reset to default 5

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

need to use event delegation to support dynamic elements

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

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.

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1745382396a4625287.html

相关推荐

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信