jQuery 防止提交带有 onclick 事件的提交按钮提交
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15027280/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Prevent submit button with onclick event from submitting
提问by Coen Ponsen
I want to prevent a submit button with onclick event from submitting:
我想阻止带有 onclick 事件的提交按钮提交：
$j('form#userForm .button').click(function(e) {
if ($j("#zip_field").val() > 1000){
$j('form#userForm .button').attr('onclick','').unbind('click');
alert('Sorry we leveren alleen inomstreken hijen!');
e.preventDefault();
return false;
}
});
This is the submit button:
这是提交按钮：
<button class="button vm-button-correct" type="submit"
onclick="javascript:return myValidator(userForm, 'savecartuser');">Opslaan</button>
It will show the "alert" function and also removes the onclick event, but the form is submitted anyway. Manually remove the onclick event before submitting will solve the problem. However this is core functionality of and I dont want to remove it.
它将显示“警报”功能并删除 onclick 事件，但无论如何提交表单。提交前手动去掉onclick事件即可解决问题。然而，这是核心功能，我不想删除它。
EDIT:
编辑：
It's definitely caused by the onclick selector.. How can I force my jQuery script to instantly reload the onclick event? adding before jquery code: $j('form#userForm .button').attr('onclick','');will solve issue.. however my validation won't work an anymore...
这肯定是由 onclick 选择器引起的。我怎样才能强制我的 jQuery 脚本立即重新加载 onclick 事件？在 jquery 代码之前添加：$j('form#userForm .button').attr('onclick','');将解决问题......但是我的验证将不再起作用......
回答by adeneo
You'll need to add the event as a parameter:
您需要将事件添加为参数：
$j('form#userForm .button').click(function(event) { // <- goes here !
if ( parseInt($j("#zip_field").val(), 10) > 1000){
event.preventDefault();
$j('form#userForm .button').attr('onclick','').unbind('click');
alert('Sorry we leveren alleen inomstreken hijen!');
}
});
Also, val()always returns a string, so a good practice would be to convert it to a number before you compare it to a number, and I'm not sure if you're really targeting all .buttonelements inside #userForminside the function, or if you should use thisinstead?
此外，val()始终返回一个字符串，因此一个好的做法是在将其与数字进行比较之前将其转换为数字，我不确定您是否真的针对函数内的所有.button元素#userForm，或者是否应该用this代替？
If you're using jQuery 1.7+, you should really consider using on()and off()for this.
如果你使用 jQuery 1.7+，你真的应该考虑使用on()and off()。
回答by lxgreen
Basically, if you change your button type from type="submit"to type="button", such button won't submit form, and no workarounds are needed.
基本上，如果您将按钮类型从 更改type="submit"为type="button"，则此类按钮将不会提交表单，并且不需要解决方法。
Hope this helps.
希望这可以帮助。
回答by Grant Thomas
Don't forget that there are function/event arguments, but you must specify the parameters:
不要忘记有函数/事件参数，但您必须指定参数：
$("#thing").click(function(e) {
e.preventDefault();
});
In this way, the submission is halted, and so you can conditionalise it.
通过这种方式，提交被暂停，因此您可以对其进行条件化。
回答by ?????
Best way is to do everything inside your submit event handler of the form. Remove the inline onclick and run it inside the submit function
最好的方法是在表单的提交事件处理程序中执行所有操作。删除内联 onclick 并在提交函数中运行它
$j('#userForm').submit(function(e) {
if (+$j("#zip_field").val() > 1000){
alert('Sorry we leveren alleen inomstreken hijen!');
return false;
}
return myValidator(userForm, 'savecartuser');
});
回答by Vaidotas Kniuras
I believe there is an easier way:
我相信有一个更简单的方法：
$j('form#userForm .button').click(function(event) { // <- goes here !
if ( parseInt($j("#zip_field").val(), 10) > 1000){
event.stopPropagation();
}
});
