javascript - 即使 .click() 不会触发动画，调用 .mouseenter() 仍然有效

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”淡出，如下所示:

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

奇怪的是，当我点击提交时没有任何反应。我想也许它没有调用我的 .js 文件，但是可惜，当我将其更改为 .mouseenter( ) 时，它完美地触发了 div 的淡出。

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

我看到一个旧的 Stack Overflow 帖子，其中他们使用警报而不是动画，所以我在调试过程中也尝试过，它仍然有效。从字面上看，这只是似乎破坏了东西的动画(尝试了 .slideToggle、.slideDown 等只是为了检查)。谢谢!

Answer 1

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

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