Bootstrap модальный второй раз, не вызывающий функцию jQuery - PullRequest
Новая
       16

Bootstrap модальный второй раз, не вызывающий функцию jQuery

0 голосов
/ 24 сентября 2018

Я пытаюсь вызвать функцию, представляющую собой функцию отправки формы на показанном.bs.modal, но она запускается только в первый раз.

Мой модальный режим: enter image description here

Каждый из перечисленных пунктов является формой.Мой код jQuery для этого: 

$('#edit_modal').on('shown.bs.modal', function (event) {
    console.log("shown");
    $('#edit_form').submit(function (event) {
        event.preventDefault();
        var url = $(this).attr('action');
        var data = $(this).serialize();
        $.post(url, data, function (data) {
            $('#edbtn').attr({
                class: 'btn btn-success',
                disabled: 'true',
                value: data
            });
        });

    });
});

в консоли я вижу журнал "показывается" только при первом его открытии.И только первый раз при нажатии кнопки «Сохранить», он работает нормально, но во второй раз он перенаправляет на страницу actionurl.php, что означает, что на этот раз он не вызывает эту функцию, поскольку она не отображается повторно.

примечание: Iпробовал $ (this) .modal (). hide (). show ();но это не показывает модальное или что-то подобное.

Ответы [ 3 ]

0 голосов
/ 24 сентября 2018

Если форма внутри вашего модального окна не добавляется динамически, то при открытии модального режима простое извлечение привязки из модального события открытия должно помочь: 

$('#edit_form').submit(function(event) {
  event.preventDefault();
  var url = $(this).attr('action');
  var data = $(this).serialize();
  $.post(url, data, function(data) {
    $('#edbtn').attr({
      class: 'btn btn-success',
      disabled: 'true',
      value: data
    });
  });
});

Если форма добавляется при открытии модального окна, вам необходимо привязать существующий элемент, например <body>: 

$('body').on('submit', '#edit_form', function(event){
  event.preventDefault();
  var url = $(this).attr('action');
  var data = $(this).serialize();
  $.post(url, data, function(data) {
    $('#edbtn').attr({
      class: 'btn btn-success',
      disabled: 'true',
      value: data
    });
  });
});
0 голосов
/ 24 сентября 2018

Вы устанавливаете нового слушателя отправки каждый раз, когда отображается модальный режим.Чтобы предотвратить присоединение нескольких слушателей к одной форме: 

 $('#edit_form').off("submit").on("submit",function (event){
  //blah
  })

и в более старых версиях jquery: 

 $('#edit_form').unbind("submit").bind("submit",function (event){
  //blah
  })

Если форма существует до открытия модального режима, лучшим способом было быустановите слушателя только один раз и вне модальных событий.

0 голосов
/ 24 сентября 2018

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

$(document).on('shown.bs.modal', '#edit_modal', function (event) { ... })

То же самое для события submit: 

$(document).on('submit', '#edit_form', function(event) { ... })
...