Question

我试图从以下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 =＆＃34; return validateForm（this）;＆＃34;在表格上？

Answer 1

你的doc准备功能有点迟了。试试这样：

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

这会在文档完全加载后添加单击侦听器（应该如此）。在文档准备好之后你想要发生的任何事情应该在那个函数内部，而不是链接在它上面。因此，为了将来参考，它的工作原理如下：

$(document).ready(function(){

    //your code goes in here.

});

Answer 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，这样即使元素是动态生成的，代码仍会按预期运行。

Answer 3

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

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

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

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

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

Answer 4

我尝试了与您相同的代码。确保要删除的css-class。

＆＃13;

<!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>

＆＃13;

Answer 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');
    });
});

Answer 6

您必须绑定submit（）表单事件而不是单击“提交”按钮事件。

  $(document).ready("#yourformid").submit(function() {
      $('#clicktoshow').removeClass('hidden');
      return true;
  });

根据我的说法，最好使用display none css为你的div并执行show（），就像这样

  $(document).ready("#yourformid").submit(function() {
      $('#clicktoshow').show();
      return true;
  });

单击提交按钮后删除类

6 个答案: