Question

我试图在生成Angular模板后运行JavaScript代码，但我发现JavaScript代码不能在动态生成的视图上运行。例如，在此代码中div2是通过点击div1生成alert("aaa")和div1生成的，但是在点击div2时不会生成<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.html中的脚本：

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

index.js

 func printFonts() {
    let fontFamilyNames = UIFont.familyNames
    for familyName in fontFamilyNames {
        print("------------------------------")
        print("Font Family Name = [\(familyName)]")
        let names = UIFont.fontNames(forFamilyName: familyName)
        print("Font Names = [\(names)]")
    }
}

Answer 1

问题是类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”类的单击侦听器放入。那时DOM中没有第二个div。一种可能的解决方案是在显示第二个div后重置点击监听器。

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

2 个答案: