0

我有一个 w/ID = submitButton 的元素的 jquery 事件处理程序。代码工作正常——但如果我单击另一个按钮 w/ID =yeaTotallyButton，则 submitButton 的 jquery 事件处理程序将停止工作。控制台中没有显示错误——但#submitButton 的处理程序停止触发。一旦我单击了yeahTotallyButton，调试器就不会在submitButton 的断点处停止。

到目前为止，在调试过程中，我注意到通过在yeahTotallyButton 的事件处理程序中注释掉两行（如下面的代码所示），即使我单击了yeahTotallyButton，提交按钮也会起作用。所以基本上这两行代码中的某些东西破坏了 submitButton 处理程序。为什么是这样？我怎样才能解决这个问题？我需要做这两行代码在我的最终网站中所做的事情。

<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); });

...虽然单击第一个按钮会显示该警报，但单击第二个按钮不会执行任何操作。

您可以通过调整选择器轻松修补它：

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

小提琴。但显然，这只会掩盖真正的问题：在任何情况下，DOM 中都不会有多个具有特定 ID 的元素。

于 2013-09-15T23:35:59.940 回答
0

YeahTotallyButton 的处理程序使 captchaPanel 元素变得更大，因此它挂在提交按钮上——即使 submitButton 是可见的。因此，当您单击 submitButton 时，jQuery 并没有以某种方式获得该事件。仔细调整 catpchaPanel 的大小解决了这个问题。

于 2013-09-19T03:48:01.200 回答