jQuery允许通过以下任一方式以编程方式触发表单提交:
$('.js-form-class-hook').submit();
$('.js-form-class-hook').trigger('submit');
注意:我的理解是
.trigger('submit')
是.submit()
,.on('submit',function(e){});
是.submit(function(e){});
。简而言之,.trigger('submit')
是一种比.submit()
以编程方式提交表单的功能更强大的方法。我已经知道
.on('submit',function(e){});
和.submit(function(e){});
之间的一些区别,请参阅我对What's the difference between $(form).submit and $(form).on("submit") in jQuery?的回答,我现在想更好地了解.trigger('submit')
的作用。我的结论是:经过一番研究,我发现使用
.trigger('submit')
似乎提供了允许传递任意数据的“唯一”(尽管非常强大)优势。用法示例1:
例如,这可以用于区分“人性”与“程序化”表单提交。
在jsbin.com/jivexawixonu/1/edit?html,js,console,output上观看实时演示(单击右上角的“运行/清除”)
的HTML
<form class="js-form-hook-xyz">
<button>Submit form</button>
</form>
jQuery的
var pleaseConfirmSubmission = function( formElem ){
// ... some conditions checks
// if condition met, submit with a flag
formElem.trigger( "submit" , ['isProgrammaticalSubmission'] );
}
$("body").on("submit", ".js-form-hook-xyz", function(event, isProgrammaticalSubmission) {
console.log("on form submission: " + ( isProgrammaticalSubmission || "isHumanAction !" ) );
if ( !isProgrammaticalSubmission ){ /* JS truthy/falsy value usage */
event.preventDefault(); /* cancel form submission */
pleaseConfirmSubmission( $(this) );
}
});
资源:
我错过了
.trigger('submit')
提供的其他功能吗?还是“允许传递任意数据”是使用
.trigger('submit')
的唯一优势? 最佳答案
不带参数的submit()
和trigger('submit')
之间基本上没有区别,实际上不带参数的submit()
最终仍将返回trigger()
。
您可以通过查看jQuery Source来证明这一点:
jQuery.fn.submit()
function (data, fn) {
return arguments.length > 0 ? this.on(name, null, data, fn) : this.trigger(name);
}
因此,如果将参数传递给
submit()
,则将调用.on('submit'...
,否则将调用.trigger('submit')
。submit()
是调用trigger('submit')
的更容易理解的方式。两者都没有特殊功能,您可以选择个人喜好。注意:
click()
, change()
等也是如此。除非您认为减少一个函数调用的好处,否则是的。