How to Select HTML Elements Added Using .html() in jQuery

Question

I am attempting to make a small browser game and am having trouble selecting elements that were added using .html() in jQuery.

For the game, I use an HTML template system where templates are stored in templates/%name%.txt. Then, to load a template, I use the following function.

function template(name) {
    $.get("templates/" + name + ".txt", function(data) {
        $(".content").html(data);
    });
}

Here is an example of a template I would use:

<div class="title">
    <!-- FILL -->
</div>
<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>
<button class="in-btn quit">Quit Game</button>
<button class="in-btn reset">Reset Game</button>

Now, in order for me to edit the title of the game when certain changes occur, I would use $(".title").html("Game - <span>Player Data Example</span>");.

However, because the template is not truly part of the HTML on the page, I cannot select it using the regular selectors, $(".title") returns no elements.

So, how could I select an element added using .html() via jQuery?

There is already a way to handle events where, for example, <td> has been added using .html():

$(document).on('click', 'td', function(){ 
    // Do something...
});

Maybe this can help you https://stackoverflow.com/questions/17561243/jquery-selecting-dynamically-created-elements-and-pushing-to-firebase — Ricardo Pontual, Jul 25 '17 at 19:21
What does "certain changes occur" mean? If these changes occur before the elements are present, there's nothing to change? — adeneo, Jul 25 '17 at 19:21
@adeneo, certain changes occur, such as when the turn changes from player one to player two. The elements are present before these changes occur. — mathhulk, Jul 25 '17 at 19:24
If they are present in the DOM, they are selectable, no need for anything delegated. If they aren't present, delegating won't help you as you can't replace the content of something that isn't there. — adeneo, Jul 25 '17 at 19:27

Koushik Chatterjee · Accepted Answer · 2018-01-30T07:55:23.507

why don't you use $(".content").load("templates/" + name + ".txt") to load?

And you can still select and add listener using delegation. also you can perform something after the view gets populated if you pass another callback as second argument of load(..., <callback>).

And to add more if a content is there in DOM (dosen't matter how it was added, with html(..) or by a dom appendChild method) you can always select it (at the time of its presence).

How to Select HTML Elements Added Using .html() in jQuery

1 Answers1