jquery can not trigger function from generated content

Question

I'm trying to delete one of the items which are generated by entering text and clicking the "add another" link in the linked example, but the jquery does not trigger from the generated content. If I attach the event handler to another object the function triggers but not from the generated links, any way to fix this? In the code below; when the user clicks a link with the class delLink I want the surrounding div of that link and all elements in that div removed (erased).

<div class="regItm">
    <input properties...><a class="delLink" properties...>X</a>
</div>
<div class="regItm">
    <input properties...><a class="delLink" properties...>X</a>
</div>
...
...

http://jsfiddle.net/KYkJn/2/

solved it with the code of nrodic, thx!

A.G.
– A.G.

2012-10-23 23:14:08 +00:00
Commented Oct 23, 2012 at 23:14 — A.G.
– A.G., Commented Oct 23, 2012 at 23:14

noko · Accepted Answer · 2012-10-23 23:01:41Z

3

Try this:

$('.delLink').live('click', function(){
    alert('ohoy');
    $(this).closest('div').remove();
});

Since you're dynamically adding items to the DOM, your current functions (at the state of page load) don't apply to them.

To get around that, there's the live() function. This ensures that current and future selectors in the DOM can be handled.

answered Oct 23, 2012 at 23:01

noko

1,1292 gold badges14 silver badges25 bronze badges

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

3 Comments

Zak Over a year ago

Nice .. Most forget about the .live() making sure dynamic elements get added to the DOM

nrodic Over a year ago

That's it. But because of "As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers." I would reccomend $("#basket").on("click", ".delLink", function() {

noko Over a year ago

Oh wow, I didn't notice the deprecated tag on live. Will transition my old code to on() :). Edit: Apparently, .live() is now just an alias of .on().

c69 · Accepted Answer · 2012-10-23 23:13:27Z

1

http://jsfiddle.net/Cz4Cy/

 $('body').on('click', '.delLink', function() {
     alert('ohoy');
     $(this).closest('div').remove();
 });

You should use event delegation for such cases. This will allow you to add event handlers for elements that does not exist yet.

http://api.jquery.com/on/

Code above is for illustrative purposes only. You should avoid adding delegated event listeners on body, document or window. Add them to your container, instead.

answered Oct 23, 2012 at 23:13

c69

21.8k8 gold badges56 silver badges83 bronze badges

Comments

Eugene Y. · Accepted Answer · 2012-10-23 23:12:10Z

0

You bind your event at the moment when script is executed and your basket is actually empty.

Recommended way to do such events binding with dynamic content is to use on() and off() methods on the parent element:

$('#basket').on('click', '.delLink', function(e) {
   alert('ohoy');
   $(this).closest('div').remove();
   e.preventDefault();
   return false; 
});

answered Oct 23, 2012 at 23:12

Eugene Y.

3061 silver badge6 bronze badges

Collectives™ on Stack Overflow

jquery can not trigger function from generated content

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related