在 MVC 4 的部分视图中使用 PagedList 在导航“分页”页面时会抛出 jQuery/JS

Question

我刚刚在我的 MVC 4 应用程序中使用 PagedList 实现了分页。我的应用程序的主页包含一个部分视图，显示有关某些对象的汇总数据列表。每个列表项旁边都有一个按钮，单击该按钮会启动一个模式窗口，显示有关该特定列表项的更多信息。

在列表项的第一个“分页”页面上一切正常，但是如果我导航到第二个“分页”页面并单击按钮启动模式，则没有任何反应。从 Chrome 中的开发人员工具中，我得到了Uncaught TypeError: Object [object Object] has no method 'modal'。

有问题的部分输出列表，包含模式的 DIV 和一个用于处理启动模式窗口的按钮单击事件的 JS 函数。这是部分视图中的 JS：

<script type="text/javascript">
$(document).ready(function () {
    $('.show-modal').click(function () {
        var url = $('#modal-view-property-from-get-all').attr('data-url');
        var id = $(this).attr('data-id');

        $.get(url + '/' + id, function (data) {
            $('#view-property-from-get-all-container').html(data);
            $('#modal-view-property-from-get-all').modal('show');
        });
    });
});
</script>

当我导航回第一个“分页”页面时，按钮也不会触发，并且会抛出相同的未捕获 typeError。我使用的另一个截断多行文本的 jQuery 插件也停止工作，并且文本溢出其包含的 DIV。

1. 这里实际发生了什么 - 为什么使用分页会像这样干扰 JS？
2. 我该如何解决这个问题？

编辑：

特定类型的所有记录都从控制器操作返回：

return PartialView("_GetAllPropertiesPartial", model.ToPagedList(pageNumber, pageSize));

由于是局部的，分页导航由Ajax.ActionLinks()处理：

@Ajax.ActionLink("<<", "GetAllProperties", new { page = 1 }, new AjaxOptions { UpdateTargetId = "quick-property-search-results" })

Answer 1

您需要将事件处理程序绑定到标记中不会被替换的内容，并使用.on() 方法而不是.click()，如下所示：

<script>
$(function () {
    $('body').on('click', '.show-modal', function (e) {
        var url = $('#modal-view-property-from-get-all').attr('data-url');
        var id = $(this).attr('data-id');

        $.get(url + '/' + id, function (data) {
            $('#view-property-from-get-all-container').html(data);
            $('#modal-view-property-from-get-all').modal('show');
        });
    });
});
</script>

如果你有一个你知道不会被替换的父元素，你可以使用 body 以外的东西。还值得注意的是，您可以使用.load()：http://api.jquery.com/load/

$('#view-property-from-get-all-container').load(url + '/' + id, function (response, status, jqxhr) {
    // this is an optional callback
    $('#modal-view-property-from-get-all').modal('show');
});