Question

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

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

在这种情况下，如果包含partial的div从DOM中移除（使用jQuery remove）然后再次添加并且部分再次加载到它，它应该再次运行，但它不会。

为什么它会第一次运行，但不会随后运行？可能问题是部分插入的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();
    }
})

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

2 个答案: