0

ID = submitButton を持つ要素の jquery イベント ハンドラーがあります。コードは正常に動作しますが、別のボタン (ID = yeahTotallyButton) をクリックすると、submitButton の jquery イベント ハンドラが動作しなくなります。コンソールにエラーは表示されませんが、#submitButton のハンドラは起動を停止します。デバッガーは、yeahTotallyButton をクリックすると、submitButton のブレークポイントで停止しません。

これまでのデバッグで、yeahTotallyButton のイベント ハンドラーの 2 行をコメント アウトすることで (以下のコードに示されています)、yeahTotallyButton をクリックした後でも送信ボタンが機能することに気付きました。基本的に、これら 2 行のコードの何かが submitButton ハンドラーを壊しています。どうしてこれなの？どうすればこれを修正できますか? この 2 行のコードが最終的な Web サイトで行うことを行う必要があります。

<body>

    <div id='header'>
     </div>

      <div id='captchaPanel'>

        <div id='top'>
            <div id='fillerTop'>

            </div>
            <div id='captcha'>
                <img id='captchaText' src='cryptographp.inc.php'> </img>
            </div>
        </div>
        <div id='bottom'>
            <div id='left'>
                <p  id='answerprompt'>Answer: </p>
                <input id="answerBox" type="text" name="firstname">
            </div>
            <div id='right'>
                <table id='buttonTable'>
                <tr>
                    <td><img id='recycleButton' src="images/buttons_recycle.png" ></td>
                </tr>
                <tr>
                    <td><img src="images/buttons_audio.png" ></td>
                </tr>
                <tr>
                    <td><img src="images/buttons_question.png" ></td>
                </tr>
                </table>

                <div id='logo'>
                    <img  src="images/smallLogo.png">
                </div>

            </div>

            <div id='introButtons'> 
                <button id='yeahTotallyButton' type="submit" class="button">Yeah, totally. I am cool person.</button>   
                <button id='imARobotButton' type="submit" class="button">No, I can't come. I'm a robot.</button>
            </div>      

        </div>

    </div>


    <div id='submitDiv'>
    <input id='submitButton' type="submit" class="button" value="Submit"/>
    </div>

    </body>

スクリプトは次のとおりです。

           $(document).ready(function () {
                     $("#submitButton").click(function(event) {

                        $.ajax({
                            url: 'getRejection.php',
                           success: function(data) { alert(data) }
                        });
                        $('#captchaPanel').animate({ opacity: 1}, 200);

                        $("#captchaText").attr('src', 'cryptographp.inc.php');

                        alert(event.target.id);

                    });

                    $("#imARobotButton").click(function(){
                     alert("thanks for being honest");
                     location.reload();
                    });

                      $("#yeahTotallyButton").click(function(){
                         $("#introButtons").css('visibility','hidden');

//when these two lines are commented out, 
//then the submit button works even after
// I click the yeahTotallyButton

                 //$("#captchaPanel").css('visibility','visible');
                         // $("#bottom").css('visibility','visible');

                         $("#top").css('visibility','visible');
                         $("#left").css('visibility','visible');
                         $("#right").css('visibility','visible');
                         $("#captchaPanel").fadeIn("fast");              
                         $("#captchaText").attr('src', 'cryptographp.inc.php');
                         $("#top").attr('border-radius', '4px');        
                    });     

                    $("#recycleButton").click(function(){
                         $("#captchaText").attr('src', 'cryptographp.inc.php');
                    });

           });
4

2 に答える 2

1

私の推測では、どういうわけか id が に設定された複数の要素を持つことsubmitButtonになり、クリックをチェックしているボタンはこのリストの最初ではありません。たとえば、このシナリオでは...

<div id='submitDiv'>
    <input id='submitButton' type="submit" class="button" value="Alert Submit" />
    <input id='submitButton' type="submit" class="button" value="Alertless Submit" />
</div>

$('#submitButton').click(function() { alert(42); });

...最初のボタンをクリックするとそのアラートが表示されますが、2番目のボタンをクリックしても何も起こりません。

セレクターを調整することで、簡単にパッチを適用できます。

$('[id=submitButton]').click(function() { ... });

フィドル。しかし、明らかに、これは本当の問題を覆い隠すだけです。DOM に特定の ID を持つ要素が複数存在することは決してありません。

于 2013-09-15T23:35:59.940 に答える
0

YeeTotallyButton のハンドラーが captchaPanel 要素を大きくしていたため、submitButton が表示されていても、submit ボタンの上にぶら下がっていました。したがって、submitButton jQuery をクリックすると、何らかの形でイベントが取得されませんでした。catpchaPanel のサイズを慎重に変更すると、問題が解決しました。

于 2013-09-19T03:48:01.200 に答える