Question

我之前已阅读this，但在我的情况下它仍无法正常工作。

重新加载部分视图时，嵌套在局部视图中的jquery不再有效。

我通过以下方式调用ajax：

$('#refreshPage').click(function () {
            $('#tabMain-6').html("");
            $.get('@Url.Action("Index", "Allocations")', function (data) {
               // alert(data);
                $("#tabMain-6").html(data);
            });
        });

点击我的按钮＆＃39; refeshPage＆＃39;。

我的页面上有其他Jquery，但是一旦运行了ajax，我的局部视图中的jquery就不再乐意重新运行了

我用过

 $(document).ready(function () {

在我的局部视图中，然而javascript / jquery不会运行？

我的所有脚本都嵌套在这些.ready块中，所以我不确定它为什么会在这里失败。

任何想法？

Answer 1

这是一个在jQuery上被问过一千次的问题。我理解为什么，因为它不是特别直观。

让我们来看看你做了什么。

首先，加载HTML文件。您的浏览器将您的HTML转换为DOM结构，包含元素树和其他节点。

然后，你运行一些Javascript / jQuery。这会将事件处理程序绑定到您的元素。例如，它可能将在click事件上运行的函数绑定到a元素。重要的是要注意，首先选择元素集合，然后将函数绑定到它们。

$('a').click(function() {
    console.log('a link was clicked');
});

首先查找当前存在的所有a元素，然后将函数绑定到它们。注意＆＃34;目前存在＆＃34;。

然后，您重新加载HTML。您现在用新元素替换具有事件处理程序绑定的旧元素。它们没有绑定事件处理程序，因为运行Javascript时元素不存在。

那么解决方案是什么？好吧，一个选项是每次页面内容更改时运行事件绑定代码。这可能会起作用，但它很麻烦且效率低下，尤其是在复杂的页面上。更好的选择是使用名为事件委派的东西。这使用了一个名为＆＃34; bubbling＆＃34;的Javascript功能：当一个元素触发事件时，所有的祖先元素也会被通知该事件。因此，在我们的示例中，包含div元素的a元素也会被告知点击a元素。

因此，我们可以做的是将事件处理程序绑定到我们要替换的元素的祖先元素上。因此，我们可能会在您的问题中将click处理程序绑定到#tabMain-6。此元素未替换，因此事件处理程序将保留。（通常人们使用document元素，因为它永远不会被替换，但最好使用尽可能接近事件源的元素。）然后我们可以测试事件以查看是否它起源于与选择器匹配的元素。

你可以自己完成所有这些工作，但jQuery使on函数变得非常简单。

$('#tabMain-6').on('click', 'a', function() {
    alert('a link inside #tabMain-6 was clicked');
});

无论#tabMain-6的内容被替换多少次，这都将继续工作。第一个参数是事件类型;第三个参数是事件处理函数。第二个参数是至关重要的一个：它是一个选择器，用于测试当时事件源自的元素。

您需要准确计算代码中的内容，但事件委派可能就是答案。

刷新部分视图不会重新运行jquery

1 个答案: