Dynamically add jQuery event handlers to dynamic HTML

Question

I have a div section that I'm dynamically populating via jQuery ajax:

$('#treeview').append(data.d);

Where data is a bunch of nested divs with different ids.

I also have some jQuery code that makes the divs into a treeview, with a +/- expand/collapse and dynamic data population:

 $('div.tree div:has(div)').addClass('parent'); // Requires jQuery 1.2!
    $('div.tree div').click(function() {
        var o = $(this);
        o.children('div').toggle();
        o.filter('.parent').toggleClass('expanded');
        BindGridView($(this).attr('id'));
        return false;
    });

The issue is when I paste the divs into the main treeview div all is well. When I dynamically create the exact same text, yes I've compared it, the expand/collapse & dynamic data population doesn't work; however I can see my correct div layout on my page.

I'm guessing that I need to add the click event & addClass when I'm doing the

$('#treeview').append(data.d);

But I can't figure out how.

Community · Accepted Answer · 2017-05-23 12:14:56Z

9

If you are dynamically adding elements to the DOM, then existing event handlers bound to a selector will not work (such as click).

You need to use the live function in order to have events from newly created DOM elements captured.

It should be noted (as it was in the comments by Zach L) that as of jQuery 1.7 live has been deprecated in favor of on. The general advice is the same (tracking dynamic elements), just the mechanism (on vs live) has changed.

edited May 23, 2017 at 12:14

CommunityBot

11 silver badge

answered Jan 24, 2011 at 19:13

casperOne

74.7k19 gold badges189 silver badges262 bronze badges

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

10 Comments

mike Over a year ago

something like $(#treeview).live("click", function(){ var o = $(this); o.children('div').toggle(); o.filter('.parent').toggleClass('expanded'); BindGridView($(this).attr('id')); return false; });

casperOne Over a year ago

@mike: What about the addClass? It doesn't have an impact, the selectors inside the function will work fine (looking for the parent class, I assume). The live call should work, but it's a little hard to tell from the comments. =)

Vadim Over a year ago

@mike you can't dynamically add the class, but you can do something like this $(data.d).addClass('parent').appendTo('#treeview')

mike Over a year ago

@Yads, it seems your addClass changes all my div's ids to treeview, which messes things up

mike Over a year ago

@casperOne, your live suggestion seem to have worked but until I can dynamically addClass the whole thing doesn't work

|

Zach Lysobey · Accepted Answer · 2012-03-09 21:06:02Z

4

live() is deprecated.

From the docs:

Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().

answered Mar 9, 2012 at 21:06

Zach Lysobey

15.9k21 gold badges101 silver badges153 bronze badges

Comments

Dominic Barnes · Accepted Answer · 2011-01-24 19:46:43Z

2

You can use delegate() or live() to bind event handlers to dynamic elements. In most cases, delegate() will be the most efficient route, unless you cannot predict where the dynamic elements will exist in the DOM.

answered Jan 24, 2011 at 19:46

Dominic Barnes

28.5k8 gold badges69 silver badges91 bronze badges

Comments

Brian Moreau · Accepted Answer · 2012-03-28 20:52:18Z

Creating dynamic clickable objects had me foxed for some time too. I couldn’t get the delegate() function to work either. Eventually I found this example http://www.rahulsingla.com/blog/2011/03/jqueryui-adding-removing-buttons-dynamically-from-a-jqueryui-dialog

and modified it to

var buttonClear = $('#formResult').parent().find('#formMessage'); buttonClear.append("<input type='button' value='Clear message' id='clear'>");

$("#clear").click(function() { // do button click action here });

The formResult is a form id already on the page and the formMessage is a dynamically added message displayed after the form is submitted. The script adds a button to the end of the form to clear the message.

Collectives™ on Stack Overflow

Dynamically add jQuery event handlers to dynamic HTML

4 Answers 4

10 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

10 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related