为什么这两行 jquery 会淘汰另一个 jquery 元素的事件处理程序

why do these two lines of jquery knock off the event handler for another jquery element

本文关键字：jquery 另一个 淘汰 元素 程序 事件处理 为什么 两行      更新时间：2023-09-26

我有一个jquery事件处理程序，用于一个带有ID = submitButton的元素。代码工作正常 - 但是如果我单击另一个按钮w/ID = yeahTotallyButton，那么submitButton的jquery事件处理程序将停止工作。控制台中未显示任何错误 - 但 #submitButton 的处理程序会停止触发。调试器不会在我单击"yeahTotallyButton"后停止在提交按钮的断点处。

到目前为止，在调试中，我注意到通过在 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="answerswerBox" 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');
                    });
           });

我的猜测是，您最终以某种方式将多个元素的 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 的元素。

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

相关文章：