Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Marty Hitchcock
Marty Hitchcock
13,108 Points
Posted by Marty Hitchcock
Marty Hitchcock
13,108 Points

having trouble selecting dynamically created elements with jquery

    $(".editBtn").css("display", "none");

    var currentGroupUsersRef = new Firebase(FB + "/groupUsers/" + currentGroup);

    currentGroupUsersRef.on('child_added', function(snapshot){
        $('#groupPage table').append('<tr><td>one</td><td><button class="editBtn">Edit</button></td></tr>');
    });

What I am trying to do is to select the edit buttons I am creating for each user. The code works in that it prints everything correctly but I can't interact with the appended content as it is printed after everything else has fired. Someone mentioned to me that I would need to use a jquery dynamic selector, but after a google search I didn't come up with anything to help me understand what that is.

Can anyone shed some light on this subject for me?

I know there are other solutions for this particular code but this is a consistent issue I am having with my project so I would really like to learn how I can select these elements from outside of the function which creates them.

3 Answers

Brandon Barrette
Brandon Barrette
20,485 Points
Brandon Barrette
Brandon Barrette
20,485 Points

If I understand you correctly, what you need to do is change the jquery that would fire on the buttons or whatever content on the dynamically added content.

Say I had this:

$(".editBtn").on("click", function(){
  //do something
});

This works for any class .editbtn that is loaded in the DOM. Now if you dynamically add content with .editBtn, it won't fire with this code.

Instead you need to add the listener to something already loaded in the DOM (either the container for the dynamic content or the body)

$("body").on("click", ".editBtn", function(){
  //do something
});

Now your code will work for dynamic content.

Marty Hitchcock
Marty Hitchcock
13,108 Points
Marty Hitchcock
Marty Hitchcock
13,108 Points

Thanks! That makes it much clearer.

Agapito Cruz
Agapito Cruz
21,486 Points
Agapito Cruz
Agapito Cruz
21,486 Points

Hello Marty,

I'm not sure if I am correctly understanding what you are trying to do, but the way the code is written, it looks like you are trying to select an element that hasn't been added to the DOM yet. As a test, could you move the

$(".editBtn").css("display", "none");

statement from before the

currentGroupUsersRef.on('child_added', function(snapshot){ $('#groupPage table').append('<tr><td>one</td><td><button class="editBtn">Edit</button></td></tr>');

statement to after it and see if that helps? As far as I know the jQuery selector functions traverse the DOM to return the elements that match, so if the new element has not been appended to an existing element in the DOM, it won't be found.

I hope this helps.

-Agapito

Marty Hitchcock
Marty Hitchcock
13,108 Points
Marty Hitchcock
Marty Hitchcock
13,108 Points

You are right in what the problem is, but the solution does not work. The selector still fires first as the appending is pulling data from a database so it has to wait for a response from the server where as the selector doesn't.

Agapito Cruz
Agapito Cruz
21,486 Points
Agapito Cruz
Agapito Cruz
21,486 Points

Marty,

Can you put the

$(".editBtn").css("display", "none");

inside the callback?

If that works, you may want to refactor the code to use chaining after the append call instead of a call to a selector.

-Agapito