1

我写了非常简单的代码，这里是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函数调用？

4

4 回答 4

6

尝试这个...

$('#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()将停止表单提交。

这是一个工作示例

于 2013-09-11T15:15:41.860 回答
0

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

$('#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();

于 2013-09-11T15:20:11.603 回答
0

工作演示

尝试这个

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();
});
于 2013-09-11T15:30:14.103 回答
-2

试试这个

 $('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);
});
于 2013-09-11T15:32:56.107 回答