Javascript change event kills click event

Question

This occurs when I bind a change event to a textarea and then a clickevent to a button. If I'm focused in the textarea and have made a change and then click on the button, only the change event fires. An example is here: JSFiddle

JS:

$(function() {
    $('textarea').change(function() {
        alert('mefirst')
    });
    $('#submit').click(function(e) {
        alert('hi');
    });
});

HTML:

<textarea name="details" rows="5"></textarea>
<input type="submit" id="submit"/>

If you unbind the textarea the click event will work as expected. Any suggestions would be helpful (happens in Chrome and Firefox).

If you change it to console.log instead of alert, does it work? — danronmoon, Apr 23 '15 at 20:03
It doesn't work because you have the alert, if you change the change event to something else it will continue and fire the click. See http://jsfiddle.net/p0t1pzh7/15/ — Huangism, Apr 23 '15 at 20:04
As you can see, it works with console.log: http://jsfiddle.net/ypxzvumk/ — syymza, Apr 23 '15 at 20:05
Hmm that makes sense. Must be a different issue I'm having in my app. Thanks for the tip — Ben Rudolph, Apr 23 '15 at 20:07

score 1 · Accepted Answer · answered Apr 23 '15 at 20:05

The problem is with the alerts, both the change and click event is firing but the browser doesn't know what to do with 2 alerts. If the alert() is changed to console.log(), both events are logged.

 $('textarea').change(function() {
    console.log('changed')
});
$('#submit').click(function(e) {
    console.log('submitted');
});

http://jsfiddle.net/p0t1pzh7/13/

Javascript change event kills click event

1 Answers1