jQuery 在点击时不隐藏 div

Question

我有一个 HTML 代码：

<div class="FormContainer" id="FirstFormContainer">
  <form>
    <span> Wprowadź liczbę podmiotów</span></br>
    <input id="NumberOfSubjects" /></br>
    <span> Wprowadź liczbę czynników </span></br>
    <input id="NumberOfFactors"/></br>
    <input type="submit" id="FirstSubmit" value="Dalej"/>
  </form>
</div>

和 JavaScript 代码：

$( document ).ready(function() {



$( "#FirstSubmit" ).click(function() {
    alert( "Handler for .click() called." );
    $("#FirstFormContainer").css("display", "none");
  }); }

问题是代码在点击时显示警告但没有隐藏#FirstFormContainer。另一方面，如果我粘贴代码： $("#FirstFormContainer").css("display", "none");进入浏览器它确实有效。有任何想法吗？：）谢谢！

Answer 1

您需要阻止默认操作以防止您的页面刷新。当您提交表单时，它会刷新页面，除非您告诉它不要刷新。

$(document).ready(function() {
  $("#FirstSubmit").click(function(event) {
    event.preventDefault();
    alert("Handler for .click() called.");
    $("#FirstFormContainer").css("display", "none");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="FormContainer" id="FirstFormContainer">
  <form>
    <span> Wprowadź liczbę podmiotów</span></br>
    <input id="NumberOfSubjects" /></br>
    <span> Wprowadź liczbę czynników </span></br>
    <input id="NumberOfFactors" /></br>
    <input type="submit" id="FirstSubmit" value="Dalej" />
  </form>
</div>

Answer 2

在内容之前的 head 中包含 jquery，并在结束 body 标签之前包含包含您的代码的脚本标签。

从输入中删除 type="submit" 并添加 type="button" 。您的表单正在自动提交并刷新您的页面。

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
  <div class="FormContainer" id="FirstFormContainer">
    <form>
      <span> Wprowadź liczbę podmiotów</span><br>
      <input id="NumberOfSubjects" /><br>
      <span> Wprowadź liczbę czynników </span><br>
      <input id="NumberOfFactors" /><br>
      <input type="button" id="FirstSubmit" value="Dalej" />
    </form>
  </div>
  <script>
    $("#FirstSubmit").click(function() {
      alert("Handler for .click() called.");
      $("#FirstFormContainer").css("display", "none");
    });
  </script>
</body>

jQuery 在点击时不隐藏 div

jQuery doesn't hide div on click

html

jquery

click

hide