jquery函数多次执行引导模式

Question

$(document).on('click', '.event_class', function() {

    $('#originalImageShow').modal('show');

    $('#originalImageShow').on('shown.bs.modal',  function() {
        alert('Modal Open');
    });
    $('#originalImageShow').on('hidden.bs.modal', function() {
        alert('Modal Close');
        $('#originalImageShow').off();
        $(this).removeData('bs.modal');
    });

});

嗨， 每次我单击 event_class 它都会显示两次“模式打开”警报。甚至有时它会显示多次。而且当我关闭引导模式时，有时它会多次显示“模式关闭”警报。 基本上警报号码的数量是随机变化的。 请帮忙。

Answer 1

这是因为您在 click 函数中添加了 shown.bs.modal ，该函数将在每次创建模态时绑定事件！

查看以下代码

$('.launchConfirm').on('click', function (e) {
    $('#confirm')
        .modal({ backdrop: 'static', keyboard: false })
        
});

$('.modal').on('shown.bs.modal',  function() {
        alert('Modal Open');
    });

$('.modal').on('hidden.bs.modal', function() {
        alert('Modal Close');
    });

body,
.modal-open .page-container,
.modal-open .page-container .navbar-fixed-top,
.modal-open .modal-container {
	overflow-y: scroll;
}

@media (max-width: 979px) {
	.modal-open .page-container .navbar-fixed-top{
		overflow-y: visible;
	}
}

<link href="http://jschr.github.io/bootstrap-modal/css/bootstrap-modal.css" rel="stylesheet"/>
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet"/>
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<script src="http://jschr.github.io/bootstrap-modal/js/bootstrap-modal.js"></script>
<script src="http://jschr.github.io/bootstrap-modal/js/bootstrap-modalmanager.js"></script>



<div class="page-container">
    <div class="container">
        <br />
        <button class="btn launchConfirm">Launch Confirm</button>
    </div>
</div>

<div id="confirm" class="modal hide fade">
  <div class="modal-body">
    Do you want to continue?
  </div>
  <div class="modal-footer">
    <button type="button" data-dismiss="modal" class="btn btn-primary" data-value="1">Continue</button>
    <button type="button" data-dismiss="modal" class="btn" data-value="0">Cancel</button>
  </div>
</div>