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。

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

修改

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

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');
});

在MVC 4中的部分视图中使用PagedList在浏览“分页”页面时会抛弃jQuery / JS

1 个答案: