How do I get back to the original event when onchange takes over?

I have text input and a button input.

Textbox has an onchange event hander and the button has a click event handler.

In isolation both work fine. But when I change some text in the textbox and click on the button, onchange event fires first and prevents the click from firing.

How can I still fire the click event after the onchange? Or at least figure开发者_开发百科 out what caused the event in the onchange?

Here is jsfiddle example: http://jsfiddle.net/4mQPe/

Interesting problem - this might not be obvious but the reason the event is 'prevented' is because it never occurs. This is because the change event is triggered you click outside of the field, and even though you click the button (looks like you click the button) it never happens (because the alert box is blocking it).

Inputbox's have defaultValues which you can leverage legitimately to update the default value of the input as it's changed. The example below should solve your problem.

$(function(){
    $('#button').bind("click",function(){       
        if($('#textbox').attr('defaultValue') != $('#textbox').val()) {
            alert("button clicked and value changed");
            $('#textbox').attr('defaultValue', $('#textbox').val());
        } else {
            alert("button clicked and value not changed")
        };
      });
});

Alternatively, if you still needed the change event just don't have an alert box

<input type="text" id="textbox"/><br/>
<input type="button" id="button"/>

<div id='container'></div>



$(function(){
    $('#button').bind("click",function(){
          alert("button click");
      });
$('#textbox').bind("change",function(){
    //alert("text changed");
    $('#container').html("changed!");
});

});