关于asp.net mvc：将JQuery脚本加载到由ajax调用呈现的局部视图中


Loading JQuery scripts to a partial view rendered by ajax call

以下是我的视图，其中包含一个div，其中部分视图基于视图中执行的操作呈现。

1
2
3
4
5
//Boiler Plate HTML

        @Html.Partial(Model.PartialView, Model)

//Boiler Plate HTML

部分视图通过ajax调用呈现，如下所示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//The url is supplied based on some actions in the main view
function AjaxCall(url){
    $.ajax({
        url: url,
        cache: false,
        success: function (html) {
            $("#PartialViewHolder").empty();
            $("#PartialViewHolder").html(html);
        },
        error: function (result) {
            alert("Error:" + result.status +":" + result.statusText);
        }
    });
}

主页面还会加载一些其他脚本，这些脚本对于部分视图是通用的。 这些脚本在首次呈现页面时起作用，即在呈现默认局部视图时。 但是，这些脚本停止处理由ajax调用加载的部分视图。 我相信当DOM元素发生变化时，需要重新加载这些脚本。 我正在寻找一种干净的方法来重新加载部分视图div时重新加载这些脚本。

你需要做一些关于事件绑定的阅读。http://api.jquery.com/on/

一开始很难理解但是一旦你这么做就值得。

假设你有一些像这样的代码。

1
        Click here to do stuff

像下面的例子一样的JS代码只适用于你进行绑定时出现的对象(通常是document.ready())看起来这就是你所描述的情况。

1
2
3
4
$(".magic-link").click(function(){
    alert("Magic link clicked");
    return false;  
})

如果您希望事件触发尚未加载到页面上的对象，则需要将事件处理程序绑定到容器div，即不更改的位。
像这样

1
2
3
4
$(".container").on("click",".magic-link", function(){
    alert("Magic link clicked");
    return false;
});

事件冒泡到事件处理程序并触发事件。 这具有另一个优点，即一个事件处理程序并可能处理来自数百个对象的事件。
作为指导尝试将侦听器绑定到不会更改的最近的父对象。 在示例的情况下，这是Container div。 这可以使冒泡降至最低。

相关讨论