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

Answer 2

是不是因为表单正在提交，所以您被重定向？如果是这种情况，请将处理程序更改为以下内容：

$('#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.preventDefault（）;

Answer 3

正在工作 DEMO

试试这个

e.preventDefault();阻止其在动画后提交表单$("#signInForm").submit();将提交signInForm表单id

的表单

HTML

<form name="signInForm" id="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>

码

$('#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);
    $("#signInForm").submit();
});

Answer 4

试试这个

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

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

4 个答案:

正在工作 DEMO

HTML

码