Dynamically added javascript is not working, but static code works fine?

Question

Here is what I'm doing... I have a textbox that users type something in and click an add icon. This fires some jquery code that adds the item they typed into a span within a "content" div. The generated code has a delete icon that appears on hover and when clicked it should make the span disappear. This works if the code is on the page already (before document load) but if it's dynamically created, it breaks the delete on click functionality.

Here is a JSfiddle so you can see it in action: http://jsfiddle.net/WF32y/

What can I do to fix this? I essentially want to do what happens on here (stackoverflow.com) when you enter tags to a new question.

What does that mean? Can you point me in the right direction? Thanks. — compcentral
– compcentral, Commented Oct 11, 2012 at 22:08

Fabrício Matté · Accepted Answer · 2012-10-11 22:25:10Z

5

Use event delegation for dynamically added elements by changing this:

$('a.delete').on('click', function(e) {

Into this:

$(document).on('click', 'a.delete', function(e) {

Fiddle

.on() Direct and delegated events reference

Also, concerning performance, you can attach the handler to a closer ancestor of the dynamically added elements than the document (e.g. a static wrapper element).

edited Oct 11, 2012 at 22:25

answered Oct 11, 2012 at 22:07

Fabrício Matté

70.3k27 gold badges135 silver badges168 bronze badges

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

1 Comment

compcentral Over a year ago

Excellent. I knew it had to be something simple. Thanks!

John Skoubourdis · Accepted Answer · 2012-10-13 10:21:55Z

1

You can easily do it with delegate. In your case:

  $('#container').delegate('a.delete','click', function(e) {
    e.preventDefault();
    taskID = $(this).closest('.task')[0].id;
    $(this).closest('.task').fadeTo(300, 0, function() {
        $(this).animate({
            width: 0
        }, 200, function() {
            $(this).remove();
        });
    });
});

And by the way FYI:

// jQuery version 1.4.3+
$('#container').delegate('a.delete'...

// jQuery 1.7+
$('#container').on('click', 'a.delete', function(e) {

it is faster and more propery way than:

$(document).on('a.delete'...

or:

$('body').delegate('a.delete'...

or:

$(document).delegate('a.delete'...

edited Oct 13, 2012 at 10:21

answered Oct 11, 2012 at 22:10

John Skoubourdis

3,3201 gold badge31 silver badges40 bronze badges

3 Comments

Fabrício Matté Over a year ago

Note that the standard/preferred way to bind handlers in jQuery versions >=1.7 is .on, check out the recommendations on the (deprecated) .live method page which also served for the event delegation purpose in the past.

compcentral Over a year ago

Thanks for the multiple answers. I'm still getting familiar with jQuery so that is helpful. Looks like Fabricio beat you to the punch but I appreciate the answer.

John Skoubourdis Over a year ago

@Fabrício Matté you are right I didn't know that. But even with the on method the best way to use it is with the parent element: $('#container').on('click', 'a.delete', function(e) { rather than with document or body (I just updated to my answer too)

Collectives™ on Stack Overflow

Dynamically added javascript is not working, but static code works fine?

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related