我正在使用 Bootstrap modal ,以及 javascript我正在这样做:
// When the button '#paramsOkay' inside '#exampleModal' is clicked..
$('#exampleModal').on('click','#paramsOkay', function (e) {
...
$("#exampleModal").modal("hide");
});
// Executes, regardless of what the user clicked 'Okay' or 'Close'
$('#exampleModal').on('hidden.bs.modal', function() {
alert("I was called");
});
单击“确定”按钮后,我会实现一些逻辑。当该逻辑完成后,我隐藏模式。当模式隐藏时(用户无法再看到它),我希望调用另一个函数,但只有当用户单击“确定”时我才希望这样做。
如何使其仅在用户单击“确定”时才执行?
<小时/>我的尝试:
$('#exampleModal').on('hidden.bs.modal', '#paramsOkay', function() {
alert("I was called");
});
无论单击哪个按钮,都不会调用此函数,并且在控制台中也不会产生错误。
// When the button '#paramsOkay' inside '#exampleModal' is clicked..
$('#exampleModal').on('click','#paramsOkay', function (e) {
$("#exampleModal").modal("hide");
});
// Executes, regardless of what the user clicked 'Okay' or 'Close'
$('#exampleModal').on('hidden.bs.modal', function() {
console.log("I was called 1");
});
// Doesn't get called regardless of which button is clicked
$('#exampleModal').on('hidden.bs.modal', '#paramsOkay', function() {
console.log("I was called 2");
});
<!--------------------------- EXTERNAL BOILER PLATE STUFF -----------------------------> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script><link rel="stylesheet" type="text/css" href="/css/result-light.css"><link rel="stylesheet" type="text/css" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css"><link rel="stylesheet" type="text/css" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css"><link rel="stylesheet" type="text/css" href="http://jschr.github.io/bootstrap-modal/css/bootstrap-modal.css"><script type="text/javascript" src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script><script type="text/javascript" src="http://jschr.github.io/bootstrap-modal/js/bootstrap-modalmanager.js"></script><script type="text/javascript" src="http://jschr.github.io/bootstrap-modal/js/bootstrap-modal.js"></script>
<a id="newBtn" href="#" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">New</a>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="exampleModalLabel">Input parameters</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="url-base" class="form-control-label">Base URL (optional):</label>
<input type="text" class="form-control" id="url-base" placeholder="Example: https://www.merkel.com/obama?trump=15&id=9616071454&hilarry=es">
</div>
<div class="form-group">
<label for="max-pics" class="form-control-label">Max #pics:</label>
<input type="text" class="form-control" id="max-pics" placeholder="Default: 7">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button id="paramsOkay" type="button" class="btn btn-primary">Okay</button>
</div>
</div>
</div>
</div>
最佳答案
它不会执行,因为您委托(delegate)监听的按钮上永远不会触发“hidden.bs.modal”事件。
它不会在控制台中产生错误,因为那里没有任何内容会导致错误,您只是在监听不会发生的事件。
如果您希望在单击“确定”按钮后模式关闭后执行一些代码,则需要在单击事件监听器中绑定(bind)关闭事件监听器,如下所示:
var $modal = $('#exampleModal');
$modal.on('click', '#paramsOkay', function(e) {
$modal.modal("hide");
$modal.on("hidden.bs.modal", function() {
console.log("Make me execute ONLY when Okay is clicked, please!");
});
});
<!--------------------------- EXTERNAL BOILER PLATE STUFF -----------------------------> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script><link rel="stylesheet" type="text/css" href="/css/result-light.css"><link rel="stylesheet" type="text/css" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css"><link rel="stylesheet" type="text/css" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css"><link rel="stylesheet" type="text/css" href="http://jschr.github.io/bootstrap-modal/css/bootstrap-modal.css"><script type="text/javascript" src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script><script type="text/javascript" src="http://jschr.github.io/bootstrap-modal/js/bootstrap-modalmanager.js"></script><script type="text/javascript" src="http://jschr.github.io/bootstrap-modal/js/bootstrap-modal.js"></script>
<a id="newBtn" href="#" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">New</a>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="exampleModalLabel">Input parameters</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="url-base" class="form-control-label">Base URL (optional):</label>
<input type="text" class="form-control" id="url-base" placeholder="Example: https://www.merkel.com/obama?trump=15&id=9616071454&hilarry=es">
</div>
<div class="form-group">
<label for="max-pics" class="form-control-label">Max #pics:</label>
<input type="text" class="form-control" id="max-pics" placeholder="Default: 7">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button id="paramsOkay" type="button" class="btn btn-primary">Okay</button>
</div>
</div>
</div>
</div>
关于javascript - 如果单击“确定”按钮,则在模式关闭后执行代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39323598/