如何在 jQuery 中选择使用 .html() 添加的 HTML 元素答案

【问题标题】：How to Select HTML Elements Added Using .html() in jQuery如何在 jQuery 中选择使用 .html() 添加的 HTML 元素
【发布时间】：2018-01-30 15:55:23
【问题描述】：

我正在尝试制作一个小型浏览器游戏，但无法选择在 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 的一部分，我无法使用常规选择器选择它，$(".title") 不返回任何元素。

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

已经有一种处理事件的方法，例如，使用.html() 添加了<td>：

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

【问题讨论】：

也许这可以帮助你stackoverflow.com/questions/17561243/…
“发生某些变化”是什么意思？如果这些变化发生在元素出现之前，就没有什么可改变的吗？
@adeneo，会发生某些变化，例如当回合从玩家一变为玩家二时。元素在这些变化发生之前就已经存在。
如果它们存在于 DOM 中，它们是可选择的，不需要任何委托。如果它们不存在，则委派将无济于事，因为您无法替换不存在的内容的内容。

标签： javascript jquery jquery-selectors

【解决方案1】：

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

您仍然可以使用委托来选择和添加侦听器。如果您将另一个回调作为load(..., <callback>) 的第二个参数传递，您也可以在填充视图后执行某些操作。

如果内容存在于 DOM 中，要添加更多内容（不管它是如何添加的，使用 html(..) 或通过 dom appendChild 方法），您始终可以选择它（在其存在时） .

【讨论】：