javascript - 为什么这个 jquery 函数没有被调用

Question

我写了很简单的代码，这里是html代码:

<form name="signInForm">
    <section id="signInSection">
        <input class="large" type="text" placeholder="username" />
        <br>
        <input class="large" type="password" placeholder="password">
        <br>
        <button id="signinbtn" class="small">Sign In</button>
        <br>
        <label><input type="checkbox" />Remember me.</label>
        <a href="#">Reset Password</a>

        <img src="../images/cancel.jpg" alt="Cancel Sign In">
    </section>
</form>

这里是 jQuery:

$('#signinbtn').on('click', function () {
    $('#signInSection').fadeOut(200);       
    $('#signedInSection').fadeIn(200);
    $('.signUp').fadeOut(1);
    $('.signIn').closest('header').find('input').fadeIn(200);
    $('#memberToolBarSection').fadeIn(1500);
    $('#contents').fadeIn(1500);
}); 

无论我在上面提到的点击处理程序中写什么，它都不起作用。虽然我通过发出警告来测试正在调用处理程序。

谁能告诉我为什么它没有调用所有的 fadeIn 和 fadeOut 函数调用？

Answer 1

试试这个...

$('#signinbtn').on('click', function (e) {
    e.preventDefault();
    $('#signInSection').fadeOut(200);       
    $('#signedInSection').fadeIn(200);
    $('.signUp').fadeOut(1);
    $('.signIn').closest('header').find('input').fadeIn(200);
    $('#memberToolBarSection').fadeIn(1500);
    $('#contents').fadeIn(1500);
}); 

看起来表单正在提交，在本例中只是重新加载页面。

将 e 参数添加到事件处理程序并添加 e.preventDefault() 将停止表单提交。

Here's a working example