JQuery按钮无法提交请求：弹窗内表单提交异常问题

看起来你遇到的核心问题是动态生成的表单无法触发绑定的AJAX提交事件，还有默认表单提交导致页面刷新的问题，我来帮你一步步解决：

问题根源 #

1. 事件绑定失效：你的$("#set").submit()是在页面初始化时绑定的，但这个表单是通过SweetAlert动态生成的（弹窗弹出后才存在于DOM中），所以初始的事件绑定无法作用到动态元素上。
2. 默认提交行为未阻止：当你把按钮改成type='submit'时，浏览器会触发默认的表单提交，直接刷新页面，而不会执行你的AJAX逻辑。

解决方案 #

步骤1：调整弹窗内的表单按钮 #

把弹窗里的按钮改成type='submit'，让它能触发表单提交事件：

<!-- 修改前 -->
<button name='button' class='btn btn-danger btn-sm f-14 mr-1' type='button'>Set</button>

<!-- 修改后 -->
<button name='button' class='btn btn-danger btn-sm f-14 mr-1' type='submit'>Set</button>

步骤2：用事件委托绑定表单提交事件 #

把原来的表单提交事件绑定改成事件委托，绑定到一个初始就存在的父元素（比如document）上，这样就能捕获动态生成的表单的提交事件：

$(document).ready(function () {
  // 事件委托：监听document内#set表单的submit事件
  $(document).on('submit', '#set', function (event) {
    // 阻止默认的表单提交行为，避免页面刷新
    event.preventDefault();
    
    // 执行你的AJAX逻辑
    callAJAX(
      viewsurl, 
      {"X-CSRFToken": getCookie("csrftoken") }, 
      {'settings': $('#settings').val()}, 
      'post', 
      function(data){ 
        // 这里可以添加请求成功后的处理，比如关闭弹窗
        swal.close();
        // 比如提示成功
        swal('Success!', 'Settings saved.', 'success');
      }, 
      null, 
      null 
    );
    
    return false;
  });
});

可选优化：通过SweetAlert的确认按钮提交 #

如果你想让用户点击弹窗的Confirm按钮来提交表单（而不是弹窗内的Set按钮），可以调整逻辑，去掉表单的submit按钮，在SweetAlert的preConfirm回调里获取输入值并调用AJAX：

$('#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'></form>",
    showCloseButton: false,
    showCancelButton: false,
    focusConfirm: false,
    confirmButtonText: 'Confirm',
    // 添加preConfirm回调，在点击确认时执行
    preConfirm: function() {
      return new Promise(function(resolve) {
        var settingsVal = $('#settings').val();
        if (!settingsVal) {
          // 验证输入，提示错误
          swal.showValidationMessage('Please enter your preference');
          resolve(false);
        } else {
          // 调用AJAX
          callAJAX(
            viewsurl, 
            {"X-CSRFToken": getCookie("csrftoken") }, 
            {'settings': settingsVal}, 
            'post', 
            function(data){ 
              swal('Success!', 'Settings saved.', 'success');
              resolve(true);
            }, 
            function(error) {
              swal('Error!', 'Failed to save settings.', 'error');
              resolve(false);
            }, 
            null 
          );
        }
      });
    }
  });
});

这样就能完美解决你遇到的表单无法提交或者页面刷新的问题啦！

内容的提问来源于stack exchange，提问作者Jack022