Кнопка Jquery не отправляет запрос

Question

У меня есть следующий код:

<script>
$(document).ready(function() {
  $('#manage').click(function() {
      swal({
          title: 'Choose your settings',
          type: 'info',
          html:"<form method='post' id='set'>{% csrf_token %}<input type='text' class='set-pref' placeholder='Enter your preference' name='input_val' id='settings'><button name='button' class='btn btn-danger btn-sm f-14 mr-1' type='button'>Set</button></form>",
          showCloseButton: false,
          showCancelButton: false,
          focusConfirm: false,
          confirmButtonText: 'Confirm',
          cancelButtonText: 'Go forward',
      });
    });
});
</script>

<button name="button" id="manage" type="submit" class="btn btn-danger btn-sm f-14 mr-1">manage</button>

Когда нажата кнопка, отображается панель. Проблема в том, что форма внутри панели не отправляется кнопкой. Когда я заполняю поле ввода и нажимаю кнопку, ничего не происходит. Изменение кнопки на type='submit' также не сработает, потому что она просто обновит sh страницу, не отправляя ничего. Я уверен, что проблема в моем предыдущем блоке кода, но вот как я отправляю запрос:

<script>
$(document).ready(function () {
  $("#set").submit(function (event) {

      callAJAX(viewsurl,
       {"X-CSRFToken": getCookie("csrftoken") },
       parameters={'settings': $('#settings').val()},

      'post',
       function(data){


       }, null, null );
  return false; 
  });

});

</script>

Answer 1

Похоже, ваша проблема в том, что вы динамически создаете ФОРМУ, которой еще нет на странице, с помощью Laravel Swal html:.

Я предлагаю динамически назначить ваш обработчик, используя метод .on():

jQuery(function ($) { // DOM ready and $ alias in scope

  $(document).on('submit', '#set', function (event) {
    event.preventDefault(); // Prevent browser submit form

    callAJAX(
       viewsurl,
       {"X-CSRFToken": getCookie("csrftoken")},
       parameters={'settings': $('#settings').val()},
       'post',
       function(data){
         // joy joy
       },
       null,
       null
     );
  });

});

и обязательно использовать

....type='submit'>Set</butt....