Question

在HTML中，我有一个ID为“submit1”的按钮

<div id="first"> 
    <form>
        <input type="radio" name="school" value="pitt">Pitt<br>
        <input type="radio" name="school" value="memphis">Memphis<br>
        <button id="submit1">Submit</button>
    </form>
</div>

现在在Jquery中，我尝试使用.click（）来触发div“first”到fadeOut，就像这样：

$(document).ready(function() {
    $('#submit1').click(function(){
         $('#first').fadeOut('slow');
     });
 });

奇怪的是，当我点击提交时没有任何反应。我想也许它不是在调用我的.js文件，但是当我将它更改为.mouseenter（）时，它可以完美地触发div的fadeOut。

$(document).ready(function() {
$('#submit1').mouseenter(function(){
    $('#first').fadeOut('slow');
});
});

我看到一个旧的Stack Overflow帖子，他们使用alert而不是动画，所以我在调试期间也尝试了它，它仍然有效。它实际上只是动画似乎打破了事情（试过.slideToggle，.slideDown等等只是为了检查）。谢谢！

Answer 1

由于提交按钮位于表单元素内，因此默认单击行为是将表单提交给服务器。在内部，正在调用JS，但这也会导致整个页面刷新，因此您看不到动画正在发生。为了防止这种情况，请更改代码以防止默认提交行为：

$('#submit1').click(function (e) {
    e.preventDefault();
    $('#first').fadeOut('slow');
});

即使.click（）不会触发动画，也可以调用.mouseenter（）

1 个答案: