jquery - jQuery .html() 添加的 HTML 对 javascript 函数不可见

Question

在服务器上每隔几秒钟我会生成一个 html 块，我使用 jQuery 方法 .html() 在 UI 中显示它。

    $('#contentContainer').html(JSON.parse(htmlString));

注入的 html 正确显示。

但是，也有一些 javascript 函数可以操作此 html 代码。例如，一个连接到 div 元素：

$("#startStop").click(function () { ..});

另一个引导工具提示：

    $(function () {
        $("[rel='tooltip']").tooltip();
        $(".errorTip").tooltip();
    });

问题是当我使用来自服务器的 html 填充 div 元素时，它们不再起作用。

我可以看到元素是使用正确的 id 创建的：

    <div id="startStop" data-toggle="button" class="sbClickable btn active">
    ....
    </div>

唯一的区别是，当我在 chrome 中打开源代码时，那里缺少生成的 html。

以下是我如何将代码加载到页面的步骤：

page.chtml 文件已加载
在 page.chtml 中有一个空的 div
```
<div id="contentContainer">
</div>
```
然后在 page.chtml 我调用一个方法来填充容器。该方法位于外部 .js 文件中
```
<script type="text/javascript">
    einzelaktion.populateHtml();
</script>
```
在 populateHtml 我向服务器发出 ajax 请求。检索数据时，我清空 div 并用新数据填充它：
```
$('#contentContainer div').empty();
$('#contentContainer').html(JSON.parse(htmlString));
```
方法，我在同一个外部 .js 文件中遇到问题。

我尝试将填充容器的方法移动到 page.chtml，但它没有帮助。

我还尝试在以直接方式加载页面时创建容器元素，因此它们与 page.chtml 的其他元素一起创建，并且它们在页面源中可见。在这种情况下，一切正常，直到我第一次调用服务器并替换 div 的 html。

我用谷歌搜索了类似的问题，但没有找到任何与我的问题相近的东西..

我错过了什么吗？

score 2 · Accepted Answer

改变

$("#startStop").click(function () { ..});

至

$("#contentContainer").on('click', '#startStop', function () { ..});

这样，在startStop调用绑定函数后创建的具有 id 的元素将接收到 click 事件。

score 0 · Accepted Answer

每当您在加载 HTML 后将其添加到 DOM 时，您必须使用 jQuery 的 on() 函数来创建绑定...

例如， $(".newDiv").on('click', function() { alert('clicked dynamic HTML!')});

2 回答 2