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

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 に答える
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 に答える
-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 に答える