Заблокировать событие "show", когда мой модал уже открыт (скрипт перезагружается)

Question

Я использую модал для динамической загрузки контента пользователю (благодаря AJAX и ссылке, по которой он щелкнул)

На одной из загружаемых страниц Ajax я добавил поле даты с bootstrap плагин -Datepicker (https://bootstrap-datepicker.readthedocs.io/en/latest/)

Проблема в том, что когда я нажимаю на вход, чтобы добавить дату, создается впечатление, что модал перезагружается и Я не могу его заблокировать

Я создал простой пример, чтобы показать проблему (но внезапно на моем сайте, когда я нажимаю на поле даты, он перезагружает страницу в AJAX)

http://jsfiddle.net/1L32hyzt/

HTML:

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<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">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <input type="text" name="date_from" class="form-control date-test date-from" placeholder="" value="" autocomplete="off">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Javascript:

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget)
  var modal = $(this)

  //......

  console.log('MODAL SHOW')
  $('.date-test').datepicker();
  $('.modal-body').prepend('<div><strong>MODAL SHOW</strong></div>')
});

Как вы можете видеть, когда мы нажимаем на этот вход, он перезагружает скрипт и снова добавляет «MODAL SHOW»

Я пытался добавить modal.off(); в модальное Сценарий, подобный следующему:

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget)
  var modal = $(this)

  //......

  modal.off();
  console.log('MODAL SHOW')
  $('.date-test').datepicker();
  $('.modal-body').prepend('<div><strong>MODAL SHOW</strong></div>')
});

Но проблема в том, что если пользователь закрывает модальное окно и нажимает на другую ссылку, он перезагружает тот же модальный, что и старая (тогда как это другая ссылка с другим а)

Откуда возникает проблема?

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

Answer 1

Добавление следующего кода должно помочь с вашей проблемой.

$(".date-test").datepicker().on('show.bs.modal', function(event) {
    // prevent datepicker from firing bootstrap modal "show.bs.modal"
    event.stopPropagation(); 

Это известная ошибка, связанная с начальной загрузкой datetimepicker https://github.com/uxsolutions/bootstrap-datepicker/issues/978