使用 $.submit() 触发表单提交，同时防止页面重新加载

Question

请不要太快将此问题标记为重复。

我遇到过这个问题。我已将 SUBMIT 事件的事件侦听器附加到我的表单中，如下所示：

$('#my-form')
    .submit(function() {
        return false
     });

一切都好，当我提交表单时，没有重新加载。

但是，我还将另一个事件侦听器附加到这样的表单的单个输入字段（在以前的 sn-p 上扩展）：

$('#my-form')
    .submit(function() {
        return false
     })
    .on('keydown', function(e){
        var $form = this;
        var $actionAttr = $form.action;
        var $input = e.target;
        $form.action = $actionAttr + $input.value;
        $form.submit(); <-----      
     });

现在，每当我开始向文本输入字段输入内容时，表单都会立即提交并重新加载页面。

有什么方法可以让submit 监听器“尊重” jQuery 触发的提交事件（上例中的$form.submit()）。

Answer 1

var $form=this;

是问题。在 jquery 事件处理程序中，this 是本机 DOM 元素，您需要 $(this) 来获取 jquery 元素。因此，您的意思是触发 jquery 提交，但实际上触发的是原生 DOM 提交事件，该事件 不 尊重事件处理程序。 只需包装你的这个，它应该可以工作。

Jquery submit vs. javascript submit

Answer 2

试试这个

$('#my-form')
.submit(function(e) {
    e.preventDefault();
 })
.on('keydown', function(e){
    var $form = $(this);
    var $actionAttr = $form.action;
    var $input = e.target;
    $form.action = $actionAttr + $input.value;
    $form.submit();     
 });