如何在 jQuery 中使用 .html() Select HTML 添加元素

Question

我正在尝试制作一款小型浏览器游戏，但在 selecting 使用 jQuery 中的 .html() 添加的元素时遇到了问题。

对于游戏，我使用 HTML 模板系统，模板存储在 templates/%name%.txt 中。然后，要加载模板，我使用以下函数。

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

这是我将使用的模板示例：

<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>

现在，为了让我在发生某些变化时编辑游戏的标题，我会使用 $(".title").html("Game - <span>Player Data Example</span>");。

但是，因为模板并不是页面上 HTML 的真正组成部分，所以我无法 select 使用常规 select 或 $(".title") returns没有元素。

那么，我如何 select 通过 jQuery 使用 .html() 添加的元素？

已经有一种方法可以处理事件，例如，使用 .html():

添加了 <td>

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

Answer 1

为什么不用$(".content").load("templates/" + name + ".txt")加载？

您仍然可以 select 并使用委托添加侦听器。如果您将另一个回调作为 load(..., <callback>).

的第二个参数传递，您也可以在填充视图后执行某些操作

如果 DOM 中有内容，则添加更多内容（不管它是如何添加的，使用 html(..) 或 dom appendChild 方法) 你总是可以 select 它（在它存在的时候）。

如何在 jQuery 中使用 .html() Select HTML 添加元素

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

javascript

jquery

jquery-selectors