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

Question

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

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

当然，在局部视图中放置这样的东西是行不通的，因为在局部视图加载 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>

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

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

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

但我一直在研究这个例子，并注意到他们只是将点击注册代码内联在局部视图中。

这是一种普遍安全的模式吗？如何确保在我的脚本运行之前部分视图的 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>

Answer 2

Scripts are not loaded on Partial view via partial view loaded by ajax in Asp.net MVc 

 <div class="modal fade" id="myEditCourseModal" role="dialog">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title text-center">Update Data</h4>
                    </div>
                    <div class="modal-body" id="CourseEditPreview">
                        @Html.Action("CourseUpdatePartial", "AdminCourse")
                    </div>
                </div>
            </div>
        </div>

<script type="text/javascript">

    function OpenCourseEdit(currentId) {
        $.ajax({
            type: "Get",
            url: '@Url.Action("CourseUpdatePartial", "AdminCourse")',
            cache: false,
            Async: true,
            contentType: 'application/html;charset=utf-8',
            dataType: "html",
            data: { CourseID: currentId },
            success: function (data) {
                var content = $('#CourseEditPreview').html(data);
                eval(content);
                $('#myEditCourseModal').modal('show');
            },
            error: function (error) {
                $("#LoadingPanel").css("display", "block");
                $('#CourseEditPreview').html("");
            }
        })
    }
</script>