Question

我第一次运行以下JQuery代码时，它运行正常并且调用有效，但在完成Ajax调用启动的部分更新后，它将停止工作：

    $(document).ready(function () {
        $(".thumb").click(function () {
            $("#full").attr("src", $(this).data('main'));
        });
    });

有趣的是，启动部分更新的以下代码继续有效：

<a data-ajax="true" data-ajax-method="Get" data-ajax-mode="replace" data-ajax-update="#product-details-page" href="/Catalog/ProductGroupGrid?categoryId=2&amp;selectedProductId=561"><img alt="Category" src="/images/catalog/thumb/test.jpg" /></a>
                                </span>

仅供参考，我的JQuery脚本函数位于局部视图的容器中。什么可能导致它在部分更新后停止工作？我应该将JQuery函数移动到我的PartialView吗？

编辑：将其移至PartialView可以正常运行，但它并未遵循将脚本放在文档底部的最佳做法。此外，如果页面上有任何其他JQuery脚本，在容器页面中，那么它们的脚本也会中断。理想情况下，我不想显式地重新执行页面上的所有脚本。它会破坏可重用的部分视图的目的。

Answer 1

如果您想对更新的视图执行任何操作，则可能会遇到此问题。

在JQuery中，在文档加载时，它将在任何DOM Elelments上触发事件。一旦视图或视图的一部分被更新，jquery事件将不会触发这些元素。

您无需将javascript代码移动到部分视图。而是验证没有在更新的dom元素上调用任何操作。

Answer 2

您可以尝试将单击绑定移动到单独的函数中，例如InitThumbClick（），在文档就绪函数中引用它，然后在重新加载页面或部分视图时再次调用它，然后jquery将能够绑定对已加载的任何新元素的单击操作。

Answer 3

如果您使用的是jQuery 1.7或更高版本，可以尝试使用on函数：

$(document).ready(function () {
    $(document).on('click', '.thumb', function () {
        $("#full").attr("src", $(this).data('main'));
    });
});

对评论3的回复

您是否将单击处理程序附加的.thumb元素作为部分视图的一部分加载？

你是对的，你不想在局部视图中发送javascript。如果您发布的javascript代码位于布局的底部，我首先尝试使用匿名自执行函数替换.ready。这可能无法解决您的问题，但它更简洁，代码仍将在元素初始加载后运行：

$(function() {
    $(document).on('click', '.thumb', function() { // rest is same });
});

你可以尝试的一件事是改变生活，就像这样：

$(function() {
    $('.thumb').live('click', function() { // rest is same });
});

虽然live不如on，但它对通过ajax加载的元素基本上做同样的事情。如果现场为你工作，那么应该如此。

如果您仍然遇到问题，请尝试在没有Ajax帮助程序的情况下执行此操作：手动使用jQuery调用ajax调用。

当您加载局部视图时，live和on都应该应用于脚本运行后加载的元素。如果不是，您可能希望使用jsfiddle创建一个repro并更新您的问题。祝你好运。

MVC3没有在部分更新上执行JQuery

3 个答案: