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

dtcbnfnu 于 2023-02-02 发布在 Java

关注(0)|答案(2)|浏览(128)

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

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

在这种情况下，如果从DOM中删除了包含partial的div（使用jQuery remove），然后再次添加，并再次将partial加载到其中，那么它应该再次运行，但实际上没有。
为什么它第一次运行，但以后的任何一次都不运行？问题可能是要插入partial的div没有被真正删除吗？（尽管我在测试它在创建之前不存在，而且它似乎不再是DOM的一部分。）
请让我知道，如果我可以更清楚或提供任何更多的细节：）

JavaScript

来源：https://stackoverflow.com/questions/24237056/document-ready-in-partial-view-only-runs-first-time-it-is-added-to-the-do

2条答案

按热度按时间

kx7yvsdv1#

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

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

事件处理程序仅绑定到当前选定的元素;在代码调用.on时，它们必须存在于页上（）。若要确保元素存在并且可以选择，请在文档就绪处理程序内对页面上HTML标记中的元素执行事件绑定。如果要将新HTML注入页面，请在将新HTML放入页面后选择元素并附加事件处理程序。或者，使用委托事件附加事件处理程序，如下所述。
委托事件的优点是，它们可以处理以后添加到文档中的子代元素中的事件。通过选取在附加委托事件处理程序时保证存在的元素，可以使用委托事件避免频繁附加和删除事件处理程序。
可能这里的链接会帮助你解决这个问题。

赞(0）回复(0）举报 2023-02-02

mm9b1k5b2#

您应该使用.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();
    }
})

赞(0）回复(0）举报 2023-02-02

我来回答

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

2条答案

相关问题

热门标签

最新问答