如果点击ok按钮，在modal关闭后执行代码

我正在使用Bootstrap模式，在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");
});

当点击ok按钮时，我实现了一些逻辑。当逻辑完成后，我隐藏模态。当模态被隐藏时(用户不能再看到它)，我希望调用另一个函数，但我希望这样做，只有当用户点击"确定"。

如何使它只在用户点击' ok '时执行?

我的尝试:

$('#exampleModal').on('hidden.bs.modal', '#paramsOkay', function() {
    alert("I was called");
});

无论点击哪个按钮，这个都不会被调用，也不会在控制台中产生错误。

JSFiddle演示。

// 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">&#215;</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&amp;id=9616071454&amp;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>

它不会执行，因为没有'hidden.bs "。

在您委托侦听的按钮上触发Modal '事件。

它不会在控制台中产生错误，因为那里没有任何会导致错误的东西，你只是在监听一个不会发生的事件。

如果你想让一些代码在点击ok按钮后模态关闭后执行，你需要在点击事件监听器中绑定close事件监听器，像这样:

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">&#215;</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&amp;id=9616071454&amp;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>

如果您的代码被放置在文档加载函数$(function(){ ... });中，它将工作。但是我会使用jQuery的.click(..)函数而不是.on(..)。

// attach events in document loaded event
$(function() {
  $('#exampleModal #paramsOkay').click(function(e) {
    $("#exampleModal").modal("hide");
    alert("Okay was clicked");
  });
});

这是JSFiddle

相关内容

最新更新

热门标签：