未触发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从其他文件异步加载的。因此，当我注册侦听器时，它实际上是在表单加载之前，并且可以适当地受到影响。

所以要解决，我只是从文件加载表单后才重新初始化侦听器。