单击提交按钮后删除类答案

【问题标题】：Remove class after submit button is clicked单击提交按钮后删除类
【发布时间】：2015-05-28 01:46:26
【问题描述】：

我正在尝试从下面的 div 中删除 .hidden：

<div id="clicktoshow" class="hidden"><form></form></div>

当我测试下面的 jquery 时，它可以工作：

    $(document).ready("#submitbtn").click(function() {
      alert('button clicked');
   });

当我使用相同的代码但将警报替换为：

   $('#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);"在表格上？

【问题讨论】：

Ted 的答案就是您想要的。作为一种安全做法，请始终将function() {<actual function here>} 放在事件侦听器中。如果您希望在单击按钮时显示和隐藏，请将 removeClass('hidden') 更改为 toggleClass('hidden')

标签： javascript jquery html

【解决方案1】：

您的文档就绪功能有点古怪。试试这样：

$(document).ready(function(){
    $("#submitbtn").click(function() {
       $('#clicktoshow').removeClass('hidden');
    });
});

这会在文档完全加载后添加点击监听器（应该如此）。文档准备好后您想要发生的任何事情都应该在该函数中，而不是链接在它上面。所以为了将来参考，它的工作原理是这样的：

$(document).ready(function(){

    //your code goes in here.

});

【讨论】：

我希望这会起作用，但它不起作用。隐藏的类还在，表单不显示。
@jygm 那么问题出在其他地方，而不是您提供的代码中。 Take a look at this demo fiddle，它按预期工作......
代码很简单，问题是你只考虑按钮而不是表单和提交按钮作为输入。
@jygm 那么我想你需要包含完整的代码才能得到有效的答案

【解决方案2】：

您需要更正 $(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，这样即使元素是动态生成的，代码仍将按预期运行。

【讨论】：

告诉我这个，以便我理解你的帖子。谁会真正在
标签之外添加一个按钮？将您的按钮放在表单标签内，看看您的代码运行得如何。告诉我你得到了什么。
我已经编辑了上面的帖子并将按钮和 div 包裹在表单中。我必须添加e.preventDefault() 才能停止提交表单。我不小心将

【解决方案3】：

据我所知，您应该为您的 document.ready 函数使用更好的范围，如下所示：

$(document).ready(function(){
    // Your event handlers and other code in here
    $("#submitbtn").click(function() {
        $('#clicktoshow').removeClass('hidden');
    });
});

通过这样做，您将确保您的代码正确封装在“就绪”处理程序中。现在，让我知道这是否适合您，否则您可能需要提供有关其余代码的更多详细信息。

------------ 编辑 ----------

我认为我可以通过使用 jQuery 突出显示隐藏和显示元素的各个方面来扩展您的问题的答案。如果您已经在使用事件处理程序，则可以更好地利用 jQuery 库本身。它们是：hide、show 和 toggle。但我最喜欢的用法绝对是fading。看看那些，因为你会喜欢依赖这些，而不是每次都必须将你的手臂伸出到 CSS 上。请记住，这种技术非常适合在元素上使用，但如果您在数百个元素上使用此技术，那么您将开始看到性能略有下降。幸运的是，这里不是这种情况:)

【讨论】：

这与上面的答案相同，但它不起作用。 .我的代码非常简单，提交表单按钮是输入，所以这可能是问题所在。没有把握。整个页面重新加载
我刚刚修改了关于使用 jQuery 隐藏/显示和您可以利用的其他功能的答案。由于它只是一个元素，因此您应该不会看到对性能的影响。试试看，如果你有任何新的结果，请告诉我。

【解决方案4】：

我尝试了与您相同的代码。确定您要删除的 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>

【讨论】：

【解决方案5】：

给出以下标记

<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 function 通常接受一个处理程序，在 jQuery 的边缘版本中，上面的代码会产生错误。所以确实你应该使用以下代码：

$(document).ready(function(){
    $("#submitbtn").click(function() {
       $('#clicktoshow').removeClass('hidden');
    });
});

【讨论】：

好吧，如果我的表单只有

标签，它会很好用。看我做了stackoverflow上的指示。它说要删除与问题无关的内容。我认为人们会影响到我不会只使用
标签。正常操作将是表单标签的一部分，并且 onsubmit 以验证表单等。我的意思是，在现实世界中谁会在表单标签之外添加一个按钮？这是 0 的意义。

【解决方案6】：

你必须绑定 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;
  });

【讨论】：