jQuery Click事件无法与表单中的Submit按钮一起使用
[英]jQuery Click event not working with Submit button in a form
问题描述
I have two submit button in a form I want to disable button2 on click (submit) & when user click button1, button2 will enable. 
我有两个要提交的按钮，我想在单击（提交）时禁用button2，并且当用户单击button1时，button2将启用。 Sorry for silly question I am newbie. 对不起，愚蠢的问题，我是新手。
$(document).ready(function(){ $(document).on("click", ".test2", function() { if ($('#test2').is(':visible')) { $('#test2').hide(); } else { $('#test2').show(); }; }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <form id="test" method="post"> <input id="test" type="submit" value="button1" class="test1"> <input id="test2" type="submit" value="button2"/> </form>
4 个解决方案
解决方案1
1 2017-01-18 11:40:14
change 更改
$(document).on("click", ".test2", function() {
to 至
$(document).on("click", "#test2", function() {
Once Button hidden, it will not visible, since you are using click event on same button which you want to hide, your else is useless in this case. 一旦按钮隐藏，它将不可见，因为您在要隐藏的同一按钮上使用click事件，因此在这种情况下， 其他按钮将无用。
When you submit form, and came back to this form/page again, button will be visible to you. 当您提交表单并再次返回此表单/页面时，按钮将对您可见。
I'm not clear what you are trying to do: 我不清楚您要做什么：
If you don't want to submit the form, and want to perform some more operation the you nedd to use: 如果您不想提交表单，并且想要执行更多操作，则可以使用：
e.preventDefault(); as suggested by @Nitheesh and make it display:none or disabled 按照@Nitheesh的建议并使其display:none或disabled
解决方案2
0 已采纳 2017-01-18 11:41:33
Clicke event is bidden on class change it to id Clicke事件在课程中被竞标，将其更改为ID
$(document).on("click", "#test2", function()
Here is a sample code. 这是示例代码。
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $(document).on("click", "#test2", function (e) { if ($('#test2').is(':visible')) { $('#test2').hide(); e.preventDefault(); } else { $('#test2').show(); e.preventDefault(); }; }); }); </script> </head> <body> <form id="test" method="post"> <input id="test" type="submit" value="button1" class="test1"> <input id="test2" type="submit" value="button2" /> </form> </body> </html>
解决方案3
0 2017-01-18 11:48:58
How about this? 这个怎么样？ Add disabled to #test2 and remove it when #test is clicked. 将disabled添加到#test2 ，并在单击#test时将其删除。
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#test").on("click", function () { $("#test2").prop("disabled",false); }); }); </script> </head> <body> <form id="test" method="post"> <input id="test" type="button" value="button1" class="test1"> <input id="test2" type="button" value="button2" disabled /> </form> </body> </html>
解决方案4
0 2017-01-18 12:10:24
I would change the js & html a bit. 我会稍微改变js和html。
Why? 为什么？ Cause if you want to disable the button2 on submit and enable it when the button1 is clicked, it's best to not put two submits in the form . 原因是，如果您想在提交时禁用button2并在单击button1时启用它，最好不要在form放置两个提交。 We put one submit button , to trigger the form submit, and an <a> tag to enable the button2 (the <a> tag won't trigger the submit event again). 我们放置了一个Submit button ，以触发form提交，并放置了一个<a>标记以启用button2（ <a>标记将不会再次触发Submit事件）。
<form id="test" method="post">
<a id="test1" href="#" class="btn btn-primary">button1</a>
<button id="test2" type="submit" class="btn btn-primary">button2</button>
</form>
And in the jQuery we do something like this inside your $(document).ready() function: 在jQuery中，我们在$(document).ready()函数中执行以下操作：
$('#test').on('submit', formSubmit);
$('#test1').on('click', unableButton);
function formSubmit () {
$('#test2').prop('disabled', true);
// Here you put the rules to submit your form
}
function unableButton (e) {
e.preventDefault();
$('#test2').prop('disabled', false);
}
If you want i made this fiddle so you can see the code in action: https://jsfiddle.net/dobbinx3/Lu2ns80b/1/ 如果您想让我摆弄小提琴，那么您可以查看运行中的代码： https : //jsfiddle.net/dobbinx3/Lu2ns80b/1/
Cya. Cya。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.