jquery datatable - “jqueryui modal”正在页面中创建重复的对话框 html

Posted 2023-05-09

【中文标题】jquery datatable - “jqueryui modal”正在页面中创建重复的对话框 html

【英文标题】：jquery datatable - "jqueryui modal" is creating duplicate dialog html in the page

【发布时间】：2018-04-02 02:24:38

【问题描述】：

我正在尝试在我的 ASP.NET 应用程序中实现 jQuery 数据表 - jQuery UI 模式功能。 （如下）

https://datatables.net/extensions/responsive/examples/display-types/jqueryui-modal.html

我看到的问题是，对话框正在页面中创建重复的 html 条目。

我也可以在数据表网站中看到问题（单击每行中的加号以启动对话框。将创建重复的 html 条目。）

任何避免重复输入的建议/建议将不胜感激。

【参考方案1】：

问题是每次点击打开它都会创建一个新的模式，而当你关闭它时，它只是将它的显示属性更改为无，将其留在 DOM 中。

您需要在 DOM 关闭后/关闭时从 DOM 中删除模式。幸运的是，jQuery UI 有一个非常健壮的 API，并且该模式（对话框）有你可以监听的事件。

我不知道您的特定选择器对于您的模式是什么，因此您需要调整以下内容，但基本上您可以侦听对话框的关闭事件并在关闭时将其删除。

$(".selector").dialog(
  close: function( event, ui ) 
    $(this).remove();
  
);

【讨论】：

感谢您的信息。我会试试的。

不客气。再次，您可能需要调整选择器以适合您的代码。但本金保持不变。

【参考方案2】：

好的，我真的很想在这里添加一些东西来帮助许多其他人。在尝试了所有解决方法之后，我学到了一些非常重要的东西。如果您将完整的 DOM 加载到对话框窗口中，则会创建另一个实例，您将花费大量时间。在我的例子中，我在 MVC 中加载了一个局部视图，果然它显示了一个完整的 DOM。我看过很多关于尝试使用循环销毁、删除甚至手动删除重复项的帖子。这些并不是真正的答案，而是另一个问题的创可贴。此外，在对话框中加载数据时，可能在进行 ajax 调用时要小心，不要在此过程中重复加载脚本。如果您需要调用 $('.selector').dialog().dialog() 则出现问题，第一个实例有冲突。

我的解决方案有效，而其他解决方案均无效。 1) 我修改了部分视图，将 a 放置为仅包含我需要的内部 html。 2) 获取数据会返回整个 DOM，所以我使用 find() 来限制对话框中返回的内容。 3) 关闭对话框时使用 dialog('close') 方法，即使根据文档，这也是所有必需的。

如果您有刷新问题，请小心构建对话框，我选择避开 doc ready 结构，因为它有时会导致冲突。使用时可以构建对话框。

小心真正返回的数据会导致奇怪的行为。

现在它按预期运行，如下所示，我真的希望这可以为某人节省几个小时的无休止的事情:) 它对我有用。

var editOptDialog = YourOptions

Open:
         $("#dialog-edit").dialog(editOptDialog);
         $("#dialog-edit").dialog('open');
         $.get($(element).attr('url'), function (data) 
             $("#dialog-edit").dialog().html($(data).find('#content-modal'));
         );
Close:
         $("#dialog-edit").dialog().dialog("instance").close();