Javascript 为什么这两行jquery会取消另一个jquery元素的事件处理程序_Javascript_Jquery_Web

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

javascript jquery web

Javascript 为什么这两行jquery会取消另一个jquery元素的事件处理程序,javascript,jquery,web,Javascript,Jquery,Web,我有一个用于元素w/ID=submitButton的jquery事件处理程序。代码运行良好——但是如果我单击另一个按钮w/ID=yeahTotallyButton，submitButton的jquery事件处理程序将停止工作。控制台中没有显示错误——但是#submitButton的处理程序停止触发。单击yeahTotallyButton后，调试器不会在submitButton的断点处停止到目前为止，在调试过程中，我注意到，通过注释yeahTotallyButton事件处理程序中的两行（如下代码

我有一个用于元素w/ID=submitButton的jquery事件处理程序。代码运行良好——但是如果我单击另一个按钮w/ID=yeahTotallyButton，submitButton的jquery事件处理程序将停止工作。控制台中没有显示错误——但是#submitButton的处理程序停止触发。单击yeahTotallyButton后，调试器不会在submitButton的断点处停止

到目前为止，在调试过程中，我注意到，通过注释yeahTotallyButton事件处理程序中的两行（如下代码所示），即使在我单击yeahTotallyButton之后，submit按钮仍然有效。因此，这两行代码中的某些内容基本上破坏了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>

我的猜测是，不知何故，您最终会有多个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); });

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

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

您需要关闭

输入

标记（在关闭括号前添加

）@BenPearlKahan从HTML5开始，它实际上不起作用matter@BenPearlKahan我做了那个改变，但还是一样problem@abe3最好提供指向页面或JSFIDLE的链接。

<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() { ... });