Javascript 引导3：防止每次触发modal内部modal（hidden.bs.modal）

我有一个模态在另一个模态中，我已经设法在不影响另一个模态的情况下使内部模态接近。问题是，当第二个模态关闭时，它会触发自身和第一个模态的

'hidden.bs.modal'

事件

<!-- My Html -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Open demo modal</button>
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                 <h4 class="modal-title" id="myModalLabel">Demo Modal</h4>
            </div>
            <div class="modal-body">
                <p>
                    <a href="#" data-toggle="modal" data-target="#uploadImage" class="btn btn-primary">Upload image</a>
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
    <div class="modal" id="uploadImage" tabindex="-1" role="dialog" aria-labelledby="uploadImage-title" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                     <h4 class="modal-title" id="uploadImage-title">Upload new image</h4>
                </div>
                <div class="modal-body">
                    Testing Area
                </div>
                <div class="modal-footer">                
                    <button type="button" class="btn btn-default" id="btnUploadCancel">Cancel</button>
                    <button type="button" class="btn btn-success">Accept</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- My JS-->
$('#btnUploadCancel').click(function () {
    $('#uploadImage').modal('toggle');
});

$(document).on('hidden.bs.modal', '#myModal', function () {
    alert("hello");
});

$(document).on('hidden.bs.modal', '#uploadImage', function () {
    alert("goodbye");
});

开放演示模式
×
演示模式


接近
×
上传新图像
试验区
取消
接受
$（'#btnuploaddcancel'）。单击（函数（）{
$（'#uploadImage'）.modal（'toggle'）；
});
$（document）.on（'hidden.bs.modal'，'myModal'，函数（）{
警惕（“你好”）；
});
$（document）.on（'hidden.bs.modal'，'#uploadImage'，函数（）{
警惕（“再见”）；
});

这是我做的

这个问题的原因是，我只需要在第二个模态被隐藏时触发一个动作，然后在第一个模态被隐藏时触发其他动作关于如何使用每个事件解决此问题的任何想法？？？

---

注意：第二个模态必须位于另一个模态内部，因为它们被称为局部视图。

第二个模态html不必包含在第一个模态主体中。仅包括数据目标链接，并将第二个模式移到第一个模式之外。这样，事件将按您的预期进行

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Open demo modal</button>
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                 <h4 class="modal-title" id="myModalLabel">Demo Modal</h4>
            </div>
            <div class="modal-body">
                <p>
                    <a href="#" data-toggle="modal" data-target="#uploadImage" class="btn btn-primary">Upload image</a>
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>

</div>
<div class="modal" id="uploadImage" tabindex="-1" role="dialog" aria-labelledby="uploadImage-title" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                     <h4 class="modal-title" id="uploadImage-title">Upload new image</h4>
                </div>
                <div class="modal-body">
                    Testing Area
                </div>
                <div class="modal-footer">                
                    <button type="button" class="btn btn-default" id="btnUploadCancel">Cancel</button>
                    <button type="button" class="btn btn-success">Accept</button>
                </div>
            </div>
        </div>
    </div>

打开演示模式
×
演示模式


接近
×
上传新图像
试验区
取消
接受

---

我猜这些模式元素是异步引入页面的，这就是为什么您要使用绑定到文档的委托事件侦听器，而不是将

hidden.bs.modal

直接绑定到

\myModal

和

\uploadImage

本身。如果不是这样，您可以直接绑定，我建议使用这种方法捕获

#uploadImage

本身上的

隐藏的
事件，并使用类似
event.stopPropagation（）的方法防止它在DOM树中冒泡

但是，您也可以继续将此处理程序委托给文档，并使用传递到处理程序回调中的
事件
对象的
目标
属性来确定哪个元素是事件的实际源：

$(document).on('hidden.bs.modal', '#myModal', function (event) {
    if (event.target.id == 'uploadImage') {
        // do stuff when the upload dialog is hidden.
    }
    else if (event.target.id == 'myModal') {
        // do stuff when the outer dialog is hidden.
    }
});

注：您可能已经知道，引导框架。当您继续在modals中嵌套modals时，请注意这一点，特别是关于通过标记API和
data disease=“modal”
初始化的disease元素

p.p.S.：

Hi@mihai alex感谢您的回复。我想到了这一点，但我需要第二个在第一个里面，因为这两个都是从局部视图调用的。对不起，我不清楚。非常感谢，它工作得非常好，正是我需要的。我需要做的唯一一件事就是将代码放在主窗口中，因为当放在部分视图中时，第二个模态继承了所有过去的事件。