部分视图中的$( document ).ready()仅在第一次通过AJAX添加到DOM时运行
部分视图中的$( document ).ready()仅在第一次通过AJAX添加到DOM时运行
提问于 2014-06-16 13:24:46
在使用AJAX将分部视图加载到页面上的对话框之后，这段代码(位于分部视图本身而不在主页中)会运行，并且我会像预期的那样获得选项卡：
// Run this on page load
$(function () {
debugger;
$("#ProjectTabset").tabs();
});在这种情况下，如果包含部分的div从DOM中删除(使用jQuery remove)，然后再次添加，并再次将部分加载到其中，它应该再次运行，但它没有运行。
为什么它会在第一次运行，而不是随后的任何一次？问题会不会是片断所插入的div并没有以某种方式真正删除？(尽管我正在测试它在创建之前并不存在，而且它似乎不再是DOM的一部分。)
如果我可以说得更清楚或提供更多细节，请告诉我:)
回答 2
Stack Overflow用户
发布于 2014-06-16 13:41:13
由于您已经从DOM中删除了元素并动态添加回来，如果您希望在动态添加的元素上处理事件，则可能需要通过on()使用委托事件。试试下面的方法，看看是否有帮助。
$( document ).on( 'ready', function (e) {
$("#ProjectTabset").tabs();
})事件处理程序仅绑定到当前选定的元素；当您的代码调用.on()时，它们必须存在于页面上。若要确保元素存在并且可以选择，请在文档就绪处理程序内为页面上HTML标记中的元素执行事件绑定。如果要将新的HTML注入到页面中，请在将新的HTML放入页面后选择元素并附加事件处理程序。或者，使用委托事件附加事件处理程序，如下所述。委托事件的优点在于，它们可以处理稍后添加到文档中的后代元素中的事件。通过选取在附加委托事件处理程序时保证存在的元素，可以使用委托事件来避免频繁附加和移除事件处理程序。
可能是here将帮助您解决此问题的链接。
Stack Overflow用户
发布于 2014-06-16 13:51:35
您应该使用.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();
}
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24237056
复制相关文章
相似问题
腾讯云开发者
