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

Question

I have a jquery event handler for an element w/ID = submitButton. The code works fine -- but if I click on another button w/ID = yeahTotallyButton then the jquery event handler for the submitButton stops working. No errors show in the console -- but the handler for #submitButton stops firing. The debugger does not stop at breakpoints for submitButton once I have clicked the yeahTotallyButton.

In debugging so far, I have noticed that by commenting out two lines in the event handler for the yeahTotallyButton (indicated in the code below) then the submit button works even after I click the yeahTotallyButton. So basically something in these two lines of code is breaking the submitButton handler. Why is this? How can I fix this? I need to do the things that these two lines of code do in my final website.

<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>

Here is the script:

           $(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');
                    });

           });

You need to close the `input` tag (add `/` before the closing bracket `>`) — Ben, Sep 15 '13 at 23:21
@AurelioDeRosa No quotes needed around attributes either, but it's not always a good idea to rely on HTML5 support, depending on the application. — Mooseman, Sep 15 '13 at 23:24
To debug the handler put `console.log('clicked');` inside the handler and watch in the console. — The Alpha, Sep 15 '13 at 23:31
Not closing `input` tags has nothing to do with html5. http://stackoverflow.com/questions/3201870/are-self-closing-input-tags-valid-in-html-4 — James Montagne, Sep 15 '13 at 23:32
http://jsfiddle.net/z6weM/ shows that the markup is not the problem, nor is the script (I removed all the other functions). You need to boil this problem down and remove everything except that click function, putting console.log or alert into it so you can see if it works or not. — Stephen Byrne, Sep 15 '13 at 23:36
The code you are showing here does not have the problem. Can you show us your actual code? — Starx, Sep 15 '13 at 23:42
Thanks for all the helpful comments. I isolated the 4 lines of HTML that seem to be breaking the jquery. See my edit above. — bernie2436, Sep 17 '13 at 03:43

raina77ow · Answer 1 · 2013-09-15T23:41:38.670

My guess is that you somehow end up having more than one element with id set to submitButton, and the button you're checking the click on is not the first in this list. For example, in this scenario...

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

... while clicking the first button shows that alert, clicking on the second does nothing.

You can easily patch it by adjusting the selector:

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

Fiddle. But obviously, that'll only mask the real problem: in no circumstances you'd have more than one element with a specific ID in DOM.

score 0 · Accepted Answer · answered Sep 19 '13 at 03:48

The handlers for the yeahTotallyButton were making the captchaPanel element bigger, so that it hung over the submit button -- even though the submitButton was visible. So when you clicked on the submitButton jQuery was not getting the event somehow. Carefully resizing the catpchaPanel solved the problem.

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

2 Answers2