Question

我有一段代码使用jQuery on（例如$(formElement).on('submit', callback)）注册了回调，并且在应用程序的某个地方，我试图使用HTML表单元素对象触发表单提交（例如{{1} }）不使用jQuery。但是，事件处理程序未被调用，但当我只是将代码更改为formElement.submit()时，调用了回调函数。所以这是第一个问题，为什么？

所以我开始使用不同的提交/注册技术，这段代码可以工作 - 调用回调函数（$(formElement).submit()是长度为1的jQuery对象）：

$formElement

然而将其更改为：

$formElement.on('submit', function () {
    // do some stuff
});
$formElement.on('submit', function () {
    // do more stuff
});


setTimeout(function() {
    $formElement.submit();
}, 10000);

没有触发回调。更重要的是，当我用setTimeout(function() { $formElement[0].submit(); }, 10000);替换$formElement.on时，无论我如何触发它们（jQuery提交或HTML表单提交），都不会调用回调

所以我可能错过了一些关于事件处理的基本知识。你可以帮忙吗？

Answer 1

我对jquery不是很熟悉，但.submit似乎并没有实际提交表单，而是注册了一个提交事件的监听器，而dom元素的本机.submit方法实际上提交了形式。

这是一种既能听取手动提交又能在10秒后触发提交的方法：

  const form = document.getElementById('someform');

  form.addEventListener('submit', e => {
    alert('form submitted');
  });

  setTimeout(() => {
    form.dispatchEvent(new Event('submit'));
    form.submit();
  }, 10000);

我手动调度提交事件，因为提交方法似乎提交了表单，但没有触发事件。

addEventListener vs jquery.on和form.submit vs jquery.submit - difference

1 个答案: