jQuery Click事件无法与表单中的Submit按钮一起使用
[英]jQuery Click event not working with Submit button in a form
问题描述
我有两个要提交的按钮，我想在单击（提交）时禁用button2，并且当用户单击button1时，button2将启用。 对不起，愚蠢的问题，我是新手。
$(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
更改
$(document).on("click", ".test2", function() {
至
$(document).on("click", "#test2", function() {
一旦按钮隐藏，它将不可见，因为您在要隐藏的同一按钮上使用click事件，因此在这种情况下， 其他按钮将无用。
当您提交表单并再次返回此表单/页面时，按钮将对您可见。
我不清楚您要做什么：
如果您不想提交表单，并且想要执行更多操作，则可以使用：
e.preventDefault(); 按照@Nitheesh的建议并使其display:none或disabled
解决方案2
0 已采纳 2017-01-18 11:41:33
Clicke事件在课程中被竞标，将其更改为ID
$(document).on("click", "#test2", function()
这是示例代码。
<!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
这个怎么样？ 将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
我会稍微改变js和html。
为什么？ 原因是，如果您想在提交时禁用button2并在单击button1时启用它，最好不要在form放置两个提交。 我们放置了一个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>
在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);
}
如果您想让我摆弄小提琴，那么您可以查看运行中的代码： https : //jsfiddle.net/dobbinx3/Lu2ns80b/1/
Cya。
jQuery click事件也会触发提交表单按钮click事件
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.