打开和关闭模态后重复数据

Question

我正在使用 ajax 然后我想调用附加数据到模态，但是为什么我的数据在我打开和关闭模态后总是返回多个结果？ 有人可以帮我如何重置吗？所以我只得到 1 个结果。

第一次觉得这么好，因为我只有1个结果，

但是当我关闭mymodal并再次打开时，最后的结果并没有消失。所以我得到了这样的双重结果

然后这永远不会停止并且总是增加取决于我点击和关闭模态的多少。

 xd[i].addEventListener("click", function(callback){
     console.log($(this));
     $("#mdApart").modal('show');
     $( "#newpend" ).append(`aaa`);
 });

Answer 1

发生这种情况是因为这一行在您的点击处理程序中：

$( "#newpend" ).append(

aaa

);

追加意味着添加到最后。

也许你想把那条线从点击处理程序中取出，这样它只运行一次，否则你需要使用不同的 jQuery 方法，也许

.replaceWith()

或

.html()

Answer 2

更改以下内容：

$("#newpend").append('aaa');

致：

$("#newpend").html('aaa');

这是因为 .append() 会将内容添加到已经存在的元素/内容的末尾。通过使用 .html()，您将用新内容替换元素中的内容。

Answer 3

您需要在隐藏事件上清除内容 div

$('#myModal').on('hidden.bs.modal', function () {

    $('#yourContentDiv').html('');

});

Answer 4

关闭模式后，您应该简单地处理它。 Bootstrap 为您提供了一种方法。

$('#myModal').on('hidden.bs.modal', function () {
    $('#myModal').modal('dispose');
});