Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

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

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

Thanks! That makes it much clearer.

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

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.

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