[英]Remove class after submit button is clicked
我正在尝试从以下div中删除.hidden：
<div id="clicktoshow" class="hidden"><form></form></div>
当我测试下面的jQuery时，它可以工作：
$(document).ready("#submitbtn").click(function() {
alert('button clicked');
});
当我使用相同的代码但将alert替换为：
$('#clicktoshow').removeClass('hidden');
当我单击提交按钮时，下面的代码不会删除隐藏的代码：
$(document).ready("#submitbtn").click(function() {
$('#clicktoshow').removeClass('hidden');
});
形成：
<form method="POST" action="index.php" enctype="multipart/form-data" name="form1" onsubmit="return validateForm(this);" id="the-form"> <input tabindex="165" id="submitbtn" type="submit" class="submit-btn" value="Submit"></form>
提交按钮：
<input tabindex="165" id="submitbtn" type="submit" class="submit-btn" value="Submit">
问题：有人可以告诉我我在做什么错吗？
也许要做些onsubmit =“ return validateForm（this）;” 在表格上？
您的文档准备功能有些杂乱。 像这样尝试：
$(document).ready(function(){
$("#submitbtn").click(function() {
$('#clicktoshow').removeClass('hidden');
});
});
这将在文档完全加载后添加Click侦听器（应如此）。 文档准备好后，您想要发生的任何事情都应该在该函数内部，而不是链接在该函数内。 因此，为了将来参考，它的工作方式如下：
$(document).ready(function(){
//your code goes in here.
});
您需要更正$(document).ready()使其不包含按钮的ID，以便在页面完全加载后立即绑定该事件，以确保该元素存在。
看起来工作正常，如下所示
$(document).ready(function(){ $("#submitbtn").on('click', function(e) { e.preventDefault(); $('#clicktoshow').removeClass('hidden'); }); });
.hidden { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <button id="submitbtn">Click Me</button> <div id="clicktoshow" class="hidden">Hello</div> </form>
我还建议使用.on('click', function() {})而不是.click这样即使元素是动态生成的，代码仍将按预期运行。
据我所知，您应该为document.ready函数使用更好的作用域，如下所示：
$(document).ready(function(){
// Your event handlers and other code in here
$("#submitbtn").click(function() {
$('#clicktoshow').removeClass('hidden');
});
});
这样，您可以确保将代码正确封装在“就绪”处理程序中。 现在，让我知道这是否适合您，否则您可能必须提供有关其余代码的更多详细信息。
------------------------编辑----------------------
我认为我可以通过突出显示使用jQuery的隐藏和显示元素来扩展对您问题的答案。 如果您已经在使用事件处理程序，则可以更好地利用jQuery库本身。 它们是： 隐藏 ， 显示和切换 。 但是我最喜欢的用法肯定是褪色 。 看一下这些内容，因为您会喜欢依靠这些内容，而不必每次都将自己的手伸向CSS。 请记住，此技术非常适合在元素上使用，但是如果您将其用于数百个元素，则性能会略有下降。 幸运的是，这里不是这样：)
我尝试了与您相同的代码。 确保要删除的CSS类。
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("div").removeClass("intro"); }); }); </script> <style> .intro { font-size: 120%; color: red; } </style> </head> <body> <h1>This is a heading</h1> <div class="intro"><form><p>This is a paragraph.</p> <p>This is another paragraph.</p></form></div> <button>Remove the "intro" class from all p elements</button> </body> </html>
鉴于以下标记
<div id="clicktoshow" class="hidden"><form>I'm here</form></div>
<button>test</button>
使用以下JavaScript
$(document).ready('button').click(function(e) {
$('#clicktoshow').removeClass('hidden');
});
作品。 这是一个jsfiddle http://jsfiddle.net/64apg6t2/1/
但是， .ready函数通常接受处理程序，并且在jQuery的边缘版本中，以上代码将产生错误。 因此，确实应该使用以下代码：
$(document).ready(function(){
$("#submitbtn").click(function() {
$('#clicktoshow').removeClass('hidden');
});
});
您必须绑定Submit（）表单事件，而不是单击单击Submit按钮事件。
$(document).ready("#yourformid").submit(function() {
$('#clicktoshow').removeClass('hidden');
return true;
});
根据我的说法，最好在div中使用display none CSS，然后执行show（）
$(document).ready("#yourformid").submit(function() {
$('#clicktoshow').show();
return true;
});
单击表单提交按钮时延迟jQuery remove类函数
[英]Delaying a jQuery remove class function when a form submit button is clicked
如何将 class 添加到单击的按钮并删除 class 到先前单击的按钮
[英]How to add class to the clicked button and remove a class to the previously clicked button
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.