javascript - 应该如何处理 ajax 加载的局部 View 中的 javascript？

Question

在 ASP.NET MVC 中，在通过 Ajax 加载的局部 View 上运行 Javascript 的首选模式是什么？

例如，假设您需要在局部 View 中连接一些点击事件。

当然，将这样的东西放在分部 View 中是行不通的，因为在分部 View 加载 Ajax 后文档就绪事件不会触发。

<script type="text/javascript">
    $(function() {
        $("a.foo").click(function() {
            foo();
            return false;
        });
    });
</script>

我想这样的事情可能会奏效，但它安全吗？

<script type="text/javascript">
    $("a.foo").click(function() {
        foo();
        return false;
    });
</script>

我一直使用的模式是在加载部分后从我的父 View 运行任何 Javascript，如下所示:

$.get(url, function(html) {
    $("#partialDiv").html(html);

    // Now that the partial has loaded...
    RegisterClicks();
});

但我一直在研究 this例如，并注意到他们只是将点击注册代码内嵌在局部 View 中。

采用这种模式通常是安全的吗？如何确定局部 View 的 DOM 在我的脚本运行之前已完成加载？

Answer 1

jQuery .on() 函数应该可以解决问题，不是吗？它应该适用于动态添加的内容。

将其作为完整内容的一部分提供

<script type="text/javascript">
    $(function() {
        $("#partialContent").on("click", "a.foo", function() {
            foo();
            return false;
        });
    });
</script>

<div id="partialContent">
   <a href="#" class="foo">Link 1</a>
   <a href="#" class="foo">Link 2</a>
   <!-- More dynamic content -->
</div>