输入提交字段上的 jQuery 事件

Question

我想在单击inputfield时淡入带有 JQuery 代码的元素。但是，当选择器放置在表单中时，我似乎无法让它工作。如果我删除表单外部的选择器，它可以正常工作。这有什么工作吗？或者，也许 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

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

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

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

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

Answer 2

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

type="submit" 刷新页面。你想改变类型="按钮">

Answer 3

如果您添加如下preventDefault()，则可以在表单内输入中获得淡入效果：

$(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()并在淡入效果后稍后调用。