Question

我的asp.net MVC razor视图引擎中有以下主视图： -

<div><span class="b"> There are @Model.TotalItemCount Virtual Machines.</span></div>
@Html.Partial("_PagedVMTable",Model)
<i class=" icon icon-blue icon-star-on "></i> IT360 Data
    @section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
        $(document).ready(function () {

            $("#ServerSort").click(function () {

                $.ajax({
                    type: "Get",
                    url: "@Url.Action("Index","VirtualMachine")",

                    data: { searchTerm:  "@ViewBag.searchTerm.ToString()" , page:"1" , sort: "@ViewBag.ServerSortPam" },
                    //contentType: "application/json; charset=utf-8",
                    //dataType: "json",
                    //cache: false,
                    success: successFunc,
                    error: errorFunc
                });

                function successFunc(data, status) {     
                    $("#VMTable").html(data);
                }

                function errorFunc() {
                    alert('error');
                }
            })
            $("#RackSort").click(function () {

                $.ajax({
                    type: "Get",
                    url: "@Url.Action("Index","VirtualMachine")",

                    data: { searchTerm: "@ViewBag.searchTerm.ToString()", page: "1", sort: "@ViewBag.RackSortPam" },
                    //contentType: "application/json; charset=utf-8",
                    //dataType: "json",
                    //cache: false,
                    success: successFunc,
                    error: errorFunc
                });

        function successFunc(data, status) {
            $("#VMTable").html(data);
        }

        function errorFunc() {
            alert('error');
        }
    })
        });
    </script>

}

以及_PagedVMTAble局部视图的以下部分： -

 <th>
 <a id="ServerSort">@Html.DisplayNameFor(model=>model.ServerID)</a>
 </th>

 <th>
 <a id="RackSort">Rack  @Html.DisplayNameFor(model=>model.Server.Rack.Technology.Tag) </a>
 </th>

现在javaScript在调用主视图时可以正常工作，但是在点击分页链接（仅更新局部视图）之后，javaScript将停止工作。我的意思是停止工作是当我点击“RackSort”或“ServerSort”链接时，什么都不会发生？

那么有人可以提出建议吗？

由于

此致

Answer 1

事件处理程序仅绑定到当前选定的元素;它们必须存在于您的代码进行事件绑定调用时的页面上。

正在修改HTML 。您需要使用Event Delegation。您必须使用委托事件方法来使用.on()。

即

$(document).on(event,selector,callback_function)

实施例

$(document).on('click', "#ServerSort", function(){
    //Your code
});

代替document，您应该使用最近的静态容器。

委派事件的优势在于它们可以处理来自稍后添加到文档的后代元素的事件。

JavaScript不支持从分页链接检索的部分视图

1 个答案: