單擊按鈕之前重置引導模式觸發

Question

每當關閉時，我都需要清除引導模式窗口上的輸入。 為此，我添加了一個 hidden.bs.model 處理程序。

為什么事件處理程序 hidden.bs.modal 在與同一模態中的“運行”按鈕關聯的點擊事件之前觸發以清除輸入？ 它使我無法使用輸入中的值，因為它們已經被 hidden.bs.modal

// BUTTON LOOKUP
$( '.container').on("click", ".btnGetPerson", function() {
    var dlic = queryPersonInputValue.match(/^[a-zA-Z]{2}\d{6}$/);
    console.log('the value of variable dlic is  :' +dlic);        
    // other REST stuff 
});

// RESET LOOKUP MODAL ON CLOSE
$('#queryPersonModal').on('hidden.bs.modal', function() {
    console.log('modal closed');
    $(this)
        .find("input,textarea,select")
        .val('')
        .end()
        .find("input[type=checkbox], input[type=radio]")
        .prop("checked", "")
        .end();

});

console.log('the value of dlic is :' +dlic); 自從添加hidden.bs.modal以來總是打印null 。

我已將 HTML 添加到小提琴中：

https://jsfiddle.net/bigalnz/gLw8pnx3/1/

Answer 1

這都是關於事件冒泡和事件傳播的：

當一個事件發生在一個元素上時，它首先在它上面運行處理程序，然后在它的父級上運行，然后一直在其他祖先上運行，在window對象處終止。

在使用.container元素為.btnGetPerson按鈕編寫點擊處理程序時，您已經使用了這個原則。

---

Bootstrap Modal Js 通過以下方式為具有data-dismiss屬性的元素實現點擊處理程序：

this.$element.on('click.dismiss.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))

其中this.$element是模態元素， this.hide是隱藏模態並觸發hidden.bs.modal事件的方法。

---

因此，當點擊[data-dismiss="modal"] ，我們有以下事件序列：

0: button.btn.btn-primary.btnGetPerson
1: div.modal-footer
2: div.modal-content
3: div.modal-dialog
4: div#queryPersonModal.modal (*)
5: div.container
6: body
7: html
8: document
9: Window 

所以click.dismiss.modal只會在.btnGetPerson 、 .modal-footer 、 .modal-content 、 .modal-dialog所有點擊處理程序都運行后.modal-dialog運行。

因此，附加到.container元素的所有事件處理程序都將在#queryPersonModal.modal事件之后運行。

---

所以，我的解決方案是將點擊處理程序直接附加到'.btnGetPerson'元素：

$(".btnGetPerson").on("click", function() {      
    // ...
});

小提琴： https : //jsfiddle.net/z6ntys7f/23/

或者，如果模態 html 被異步插入到頁面中，您可以采用以下方法： - 從按鈕中刪除data-dismiss屬性 - 添加$('#queryPersonModal').modal('hide'); 在點擊處理程序中：

$(".container").on('click', '.btnGetPerson', function(e) {
   // var dlic = queryPersonInputValue.match(/^[a-zA-Z]{2}\d{6}$/);
   var dlic = $('#query-name').val();
  console.log('the value of variable dlic is  :' +dlic);        
  // other REST stuff 

  $('#queryPersonModal').modal('hide'); 
});

小提琴： https : //jsfiddle.net/z6ntys7f/25/