jquery Form.submit 处理程序未触发

Question

尝试使用form.submit(event) 处理程序根据以下示例使用ajax 发送表单数据。 jQuery AJAX submit form

但我的 Handler 函数似乎根本没有触发，我尝试添加 return false 和各种防止默认行为，但表单仍然提交到操作文件。

Javascript：

$('#formWebUI').submit(function(e) {

        e.preventDefault();
        e.stopPropagation();
        e.stopImmediatePropagation();

        let form = $(this);
        let url = form.attr('action');

        $.ajax({
               type: "POST",
               url: url,
               data: form.serialize(), // serializes the form's elements.
               success: function(data)
               {
                   ChangeLocation();
               }
             });
        return false;
    });

HTML

<form id="formWebUI" class="form-inline pb-5" action="/php/form_WebUI.php" method="POST">
      <div class="container">
        <div class="row">
          <div class="col-3 p-0">
            <div class="form-group">
              <input type="text" class="form-control w-100" id="alias" name="alias" placeholder="Alias">
            </div>
          </div>
          <div class="col-7 px-1">
            <div class="form-group">
              <input type="text" class="form-control w-100" id="text" name="text" placeholder="Text">
            </div>
          </div>
          <div class="col-2 p-0">
            <input type="submit" class="btn btn-secondary w-100" id="formWebUI" value="Add">
          </div>
        </div>
      </div>
    </form>

我也尝试将按钮作为元素按钮而不是输入。元素的类型始终是从不提交按钮。 我曾尝试在 javascript 中发出警报，但似乎无论我做什么，处理程序都不会被调用。将不胜感激任何建议。

Answer 1

您的输入元素与表单共享相同的 id。确保元素具有唯一的 id，然后将 .submit 绑定到表单 id。

将您的 JQuery 包装在 $(document).ready 中为我解决了这个问题。在此处查看 jsfiddle：

https://jsfiddle.net/520x83s7/

$( document ).ready(function(){
    $('#formWebUI').submit(function(e) {

        e.preventDefault();
        e.stopPropagation();
        e.stopImmediatePropagation();

        let form = $(this);
        let url = form.attr('action');

        $.ajax({
               type: "POST",
               url: url,
               data: form.serialize(), // serializes the form's elements.
               success: function(data)
               {
                   ChangeLocation();
               }
             });
        return false;
    });
});

Answer 2

好的，刚刚发现问题。

表单是使用 Ajax 从其他文件异步加载的。因此，当我注册监听器时，它实际上是在表单加载之前并且可以正确地受到影响。

因此，要解决此问题，我只需在从文件加载表单后重新初始化侦听器。