Сбросить бутстрап модальные огни до нажатия кнопки

Question

Мне нужно было очистить входные данные в модальном окне начальной загрузки всякий раз, когда оно закрывается. Для этого я добавил обработчик hidden.bs.model.

Почему обработчик события hidden.bs.modal запускает очистку входных данных перед событием включения, связанным с кнопкой «Выполнить» в том же модале? Это не позволяет мне использовать значения во входных данных, поскольку они уже очищены скрытым .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); всегда печатает null с момента добавления hidden.bs.modal.

Я добавил HTML к скрипке:

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

Answer 1

Это все о всплывающих событиях и распространении событий :

Когда событие происходит с элементом, оно сначала запускает обработчики для него, а затем для его родителя, затем весь путь до других предков, заканчивающийся на объекте window.

Вы уже использовали этот принцип при написании обработчика нажатия для кнопки .btnGetPerson, используя элемент .container.

---

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 запустились.

Соответственно, все обработчики событий, прикрепленные к .containerэлемент будет работать после #queryPersonModal.modal событий.

---

Итак, мое решениезаключается в том, чтобы прикрепить обработчик щелчка непосредственно к элементу '.btnGetPerson':

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

Fiddle: 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'); 
});

Fiddle: https://jsfiddle.net/z6ntys7f/25/