Bootstrap Modal 和 Jquery：[DOM] 找到 2 个具有非唯一 ID 的元素，但是所有 ID 都是唯一的

Question

好的，所以我使用 bootstrap 4，并且我在一个页面中有两种不同的模式类型。我使用 Ajax 来填充这些模式的主体。每个模态打开的这两种形式彼此不同，但它们具有某些相似的ID标签。

这就是我启动模态的方式。

$('#modalForm').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget);
    ajaxLoad(button.data('href'), 'modal_content');
});

$('#modalFormLG').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget);
    ajaxLoad(button.data('href'), 'modal_content_lg');
});

问题是当我打开一个模式，然后当我打开第二个模式时，我在浏览器控制台中收到以下错误。

[DOM] Found 2 elements with non-unique id #cashpaid: (More info: goo...) 

但是，我没有任何重复的 ID，只是现金支付的 ID 以这两种形式使用，每个模态都调用到它的正文中。

如果我刷新页面并再次打开模态框，则看不到此问题。

我尝试了以下方法，但没有任何效果

$("#myModal").on("hidden.bs.modal", function(event) {
  $(this).removeData("bs.modal");
});

当我运行以下两个时，我的模态对将来的使用变得无响应，因为它们实际上删除了特定的 html 数据。

$("#myModal").on("hidden.bs.modal", function(event) {
  $(this).empty();
});

AND

$("#myModal").on("hidden.bs.modal", function(event) {
  $(this).remove();
}); 

打开并提交第一个模态框后，在浏览器控制台中输入“cashpaid”例如，我看到以下内容。

<input type="number" id="cashpaid" name="cashpaid" min="0">

但是，当我打开第二个模式并提交该表单并在浏览器控制台中键入“cashpaid”时，我会看到以下内容。

HTMLCollection(2) [input#cashpaid.valid, input#cashpaid, cashpaid: input#cashpaid.valid] 

那么有什么方法可以让 bootstrap 4 modals 在远程 url 表单关闭时清除它的数据？

任何帮助将不胜感激。提前致谢。

Answer 1

$(document).on('hidden.bs.modal', '#modalForm', function (event) {
  $('.modal-body', this).empty();
});

...将在关闭模态动画结束后删除#modalForm .modal-body的所有子元素。

注意1：你只需要绑定一次，而不是每次打开modal。

注意 2： 如果您希望在每个模式（不仅是 #modalForm）上都具有此功能，请将 #modalForm 替换为 .modal。但请记住，您只能使用在重新打开时生成其内容的模式来执行此操作。重新打开时静态模式将保持为空。