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。另一方面，如果我粘贴代码：$（＆＃34; #FirstFormContainer＆＃34;）。css（＆＃34; display＆＃34;，＆＃34; none＆＃34;）;进入浏览器它确实有效。有任何想法吗？：）谢谢！

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

在内容之前的头部包含jquery，并在结尾的body标记之前包含代码的脚本标记。

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

＆＃13;

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

＆＃13;

点击

2 个答案: