javascript - 弹出窗口的显示 id 按钮不起作用

Question

我有一个显示弹出窗口的按钮。我需要知道弹出窗口关闭后单击的按钮的 ID。显示的警报没有 id如何从第一个函数传递值 ID 以在第二个函数中使用它？

html 中的按钮，并显示弹出窗口:

<p class="stop_inv">
<span class="glyphicon glyphicon-remove-sign" aria-hidden="true"></span>
Stop</p>

同一 html 中的弹出窗口:

<div class="modal fade" id="confirm-stop-automated-popup" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog" style="width:370px;" role="document">
<div class="modal-content">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
     <form class="form-horizontal" method="post" id="stop_automated">
<div class="modal-body">
     <div class="row">
        <h1 class="center" style="font-size:100%;">
            Do you wish to close them immediately ?
        </h1>
    </div>
    </div>
<div class="modal-footer">

    <button type="button" class="btn btn-primary" name="ok" data-dismiss="modal" id="confirm-stop-button">Ok</button>
    <button type="button" class="btn btn-primary" data-dismiss="modal" id="cancel-delete-button">Cancel</button>
  </div>
  </form>
</div>
</div>
</div>

我在 javascript 中的函数:(显示了弹出窗口，但问题是我不知道单击了弹出窗口中的哪个按钮，并且应该在第二个函数中传递 var 信息来使用它。

$('.automated-orders-list .stop').on('click', function() {
var $button = $(this);
var info = $button.closest('.data').attr('data-order-id');
    $('#confirm-stop-automated-popup').modal('show');
    e.preventDefault();
    return;
});

用于弹出窗口了解单击哪个按钮的第二个 JavaScript 不起作用:

$('#confirm-stop-automated-popup .modal-footer button').on('click', function(event) {

    var $button = $(event.target); // The clicked button

    $(this).closest('.modal').one('hidden.bs.modal', function() {
        // Fire if the button element 
        alert('The button that closed the modal is: ', $button);
    });

});

Answer 1

如果您的主要目标只是显示单击了哪个按钮，您可以使用下面的代码来实现此目的。

$('#confirm-stop-automated-popup .modal-footer button').on('click',
    function() {
        console.log('The button that closed the modal is: ' + this.innerText);
        //alert('The button that closed the modal is: ' + this.innerText);
    });

当您单击按钮时，您已经持有该按钮对象。通过 this 关键字您可以读取该对象属性。您不需要通过 event.target 显式查找目标按钮。

$('#confirm-stop-automated-popup .modal-footer button').on('click',
    function(event) {
        var $button = this.innerText;

        $(this).closest('.modal').one('hidden.bs.modal', function() {
            // Fire if the button element 
            console.log('The button that closed the modal is: ' + $button);
        });

    });