Question

我有一个要全局添加到我的网站的JavaScript。这个使用jQuery的javascript，将选择任何检测到的表单，存储原始提交过程，进行一些自定义处理，然后通过原始过程正常提交表单。

我将其与下面的代码配合使用，除非当它“正常提交表单”时，我收到jQuery的“ this.trigger不是函数”错误，但随后该页面将post / gets / etc发送给了合适的目的地。如果可能，我真的很想尝试消除该错误。有什么想法吗？

var originalForm = []
var originalSubmit = []
$('form').each(function(i) {
    originalForm[i] = this;
    originalSubmit[i] = $(this).submit;

    $(this).submit(function(e){
        // stop form
        e.preventDefault();

        // do processing
        // here

        // process form as it was originally intended
        $(this).unbind('submit');
        originalSubmit[i].apply(originalForm[i]);  
    });
});

错误在这里：

jquery.min.js：4未捕获的TypeError：this.trigger不是函数在HTMLFormElement.r.fn。（：8000 / test /匿名函数）（http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js:4:6532）在HTMLFormElement。（journey.js：915）在HTMLFormElement.dispatch（jquery.min.js：3）在HTMLFormElement.q.handle（jquery.min.js：3）

Answer 1

originalSubmit[i].apply(originalForm[i]);

原始表单是原始的DOM元素，您正尝试将其用作调用jQuery Submit方法的上下文。鉴于那是无效的，您可以选择...

originalSubmit[i].apply($(originalForm[i]));

...使其成为jQuery对象，或者可能...

originalForm[i] = $(this);

...因此它已经是一个jQuery对象。

Answer 2

可以使用本机提交，而jQuery提交侦听器不会监听该本地提交，也不需要将其删除

例如：

$('form').submit(function(e){
   e.preventDefault()
   var form = this;

   // when conditions met such as after some ajax perhaps    
   form.submit();

});

Answer 3

$(this).submit返回对jQuery submit方法的引用，而不是“原始提交过程” 。因此，将其存储将毫无用处。

以下内容就足够了：

$('form').submit(function(e) {
  // stop form
  e.preventDefault();

  // do processing
  // here

  // process form as it was originally intended
  console.log(this.id, e.target.id)
  //this.submit();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="form1"><input type="submit" value="submit 1"></form>

<form id="form2"><input type="submit" value="submit 2"></form>

劫持表单提交，存储原始提交，添加处理，然后正常提交

3 个答案: