输入提交字段上的jQuery事件

Question

当单击JQuery代码时，我想淡入一个带有inputfield代码的元素。但是，当选择器放置在表单中时，我似乎无法让它工作。如果我移除表单外的选择器，它就能正常工作。有什么工作要做吗？或者，也许JQuery代码没有在表单中执行？这是我的代码：

<form action="newBet.jsp" method="get">

    <fieldset>          
        <input id="test" type="submit" name="update" value="&#9998;"/>
        <input class="form-control" id="div1" style="display:none;" type="number"/>
    </fieldset>

</form>


    $(document).ready(function(){
      $("#test").click(function(){
        $("#div1").fadeIn();
      });
    });

如果我将选择器#test放在表单之外，它可以正常工作，但我希望在表单中执行JQuery。

Answer 1

您的表单将被提交，这将刷新页面，并且不会让您看到结果。

不要将事件应用于submit按钮，而是将其应用于表单本身和return false，以防止默认行为(提交)：

<form id="test-form" action="newBet.jsp" method="get">

$(document).ready(function(){
    $("#test-form").submit(function(){
        $("#div1").fadeIn();
        return false;
    });
});

Answer 2

如果像这样添加preventDefault()，则可以通过表单中的输入获得fadein效果：

​

 $(document).ready(function(){
      $("#test").click(function(e){
        e.preventDefault();
        $("#div1").fadeIn();
      });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="newBet.jsp" method="get">

  <fieldset>
    <input id="test" type="submit" name="update" value="&#9998;" />
    <input class="form-control" id="div1" style="display:none;" type="number" />
  </fieldset>

</form>

​

表单中输入" submit“类型的默认行为是提交表单，可以防止使用preventDefault()，并在生效后的稍后时间调用。

Answer 3

<input id="test" type="button" name="update" value="&#9998;" />

Type=“提交”刷新页面。您需要更改type=“按钮”