Question

我有3个div，这将是模态

id =“ myModal”

其他div将是模态的内容-新建和编辑操作如下：

id =“ new” data-view =“新操作”

id =“ edit” data-view ='编辑操作'

function init(){      
     var modal = document.getElementById("myModal");
                modal.innerHTML = "";
                modal.innerHTML = $("#new");
}

$("#myModal").on("[data-view='New-Operation'] hidden.bs.modal", function () {
});

$("#myModal").on("[data-view='Edit-Operation'] hidden.bs.modal", function () {
})



init();

为什么两个都被触发？

Answer 1

hidden.bs.modal是要触发的事件类型

尝试更改此内容：

var modal = document.getElementById("myModal");
modal.innerHTML = "";
$("#myModal").attr('data-view','New-Operation');
modal.innerHTML = $("#new");


$("#myModal div[data-view='New-Operation']").on(" hidden.bs.modal", function () {

});

$("#myModal div[data-view='Edit-Operation']").on(" hidden.bs.modal", function () {

});

Answer 2

hidden.bs.modal事件是在页面上的任何模式被隐藏时触发的，因此，您无需创建两个模式，只需创建一个模式并根据操作更改其主体即可。

另一种解决方案，允许您继续使用两个摆脱了hidden.bs.modal事件的模式，并声明2个js函数HideModal1（）和HideModal2（），并在模式的dismiss-button中对其进行调用，但是请注意，您应该从按钮中删除data-dismiss =“ modal”属性，并将其替换为onclick属性

<button type="button" class="btn btn-secondary" onclick="HideModal1()">Close</button>

希望有帮助！

当我关闭模式时，所有hidden.bs.close都会被触发

2 个答案: