Bootstrap 模态和 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 模态框在关闭时清除远程 url 表单的数据吗？

如有任何帮助，我们将不胜感激。提前致谢。

Answer 1

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

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

注意1：只需要绑定一次即可，不需要每次打开模态都绑定

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

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

Bootstrap Modal and Jquery: [DOM] Found 2 elements with non-unique ids, however all IDs are unique

javascript

jquery

dom

bootstrap-modal

bootstrap-4