部分视图中的 $( document ).ready() 仅在第一次通过 AJAX 添加到 DOM 时运行

Question

在使用 AJAX 将部分视图加载到页面上的对话框后，此代码（位于部分本身而不是主页中）运行并且我按预期获得选项卡：

// Run this on page load
$(function () {
    debugger;
    $("#ProjectTabset").tabs();
});

在这种情况下，如果包含部分的 div 从 DOM 中删除（使用 jQuery 删除）然后再次添加并再次加载部分，它应该再次运行，但它没有。

为什么它会第一次运行，但以后不会运行？问题可能是插入部分的 div 并没有以某种方式真正删除吗？ （虽然我正在测试它在创建之前不存在，而且它似乎不再是 DOM 的一部分。）

如果我可以更清楚或提供更多细节，请告诉我:)

Answer 1

由于您已经从 DOM 中删除了元素并动态添加回来，如果您希望在动态添加的元素上处理事件，您可能需要通过 on() 使用委托事件。请尝试以下方法，看看是否有帮助。

$( document ).on( 'ready', function (e) {
   $("#ProjectTabset").tabs();
})

事件处理程序仅绑定到当前选定的元素；在您的代码调用时，它们必须存在于页面上 。在（）。要确保元素存在并且可以选择，请执行 文档就绪处理程序内的事件绑定，用于在 页面上的 HTML 标记。如果新的 HTML 被注入到 页面，选择元素并在新 HTML 之后附加事件处理程序 被放置在页面中。或者，使用委托事件附加事件 处理程序，如下所述。

委托事件的优势在于它们可以处理来自 以后添加到文档中的后代元素。经过 选择一个保证在该时间存在的元素 附加了委托事件处理程序，您可以使用委托事件 避免频繁附加和删除事件处理程序的需要。

链接here 可能会帮助您解决问题。

Answer 2

你应该使用.delegate():

 // Run this on page load or ajax load complete
 $('body').delegate('#ProjectTabset', 'ready', function() {
        $("#ProjectTabset").tabs();
 });

更新：

$(document).delegate('#ProjectTabset', 'click', function() {
    $('#ProjectTabset').tabs();
}

$.ajax(function(){
    ...
    success: function(){
        $('#ProjectTabset').click();
    }
})