JavaScript代码不适用于动态生成的html代码

Question

我试图在生成Angular模板后运行JavaScript代码，但是我发现JavaScript代码不在动态生成的视图上运行。 例如，在此代码中， div2是通过单击div1生成的， alert("aaa")是通过单击div1来运行的，但是单击div2时不会运行。

index.html的主体

<div id="div1" ng-init="showDiv2 = false">
    <div class="alertonclick" ng-click="showDiv2 =true" style="background-color: red"><br/></div>

</div>

<div id="div2" ng-if="showDiv2">
    <div class="alertonclick" style="background-color: green"><br/></div>
</div>

和index.html中的脚本：

<script src="~/index.js"></script>

index.js

$(document).ready(function () {
    $(".alertonclick").click(function () {
        alert("aaaa");
    });
});

Answer 1

问题在于，在加载页面时，将完成alertonclick类alertonclick功能之间的关联。 但是div2尚未创建。 要解决此问题，一种解决方案是使用ng-show而不是ng-if ：

<div id="div1" ng-init="showDiv2 = false">
    <div class="alertonclick" ng-click="showDiv2 =true" style="background-color: red"><br/></div>
</div>

<div id="div2" ng-show="showDiv2">
    <div class="alertonclick" style="background-color: green"><br/></div>
</div>

这样， div2从头开始生成，并具有alertonclick函数，但它是隐藏的。

Answer 2

问题在于，在呈现页面之后，您将“ .alertonclick”类的点击侦听器放置了。 那时第二个div在DOM中不存在。 一种可能的解决方案是在显示第二个div之后重置单击侦听器。