Steps to recreate this issue:

1. Type something in the text box
2. Right after typing click the button.
3. I found that only onchange event was triggered.

Code:

<div>
    <input type="text" onchange="console.log('onchange');$('#message').css('display','none');" >
    <div id="message">
        Validating
    </div>
    <br>
    <input type="button" onclick="console.log('onclick');" value="click me">
</div>

DEMO

Steps to recreate this issue:

1. Type something in the text box
2. Right after typing click the button.
3. I found that only onchange event was triggered.

Code:

<div>
    <input type="text" onchange="console.log('onchange');$('#message').css('display','none');" >
    <div id="message">
        Validating
    </div>
    <br>
    <input type="button" onclick="console.log('onclick');" value="click me">
</div>

DEMO

• javascript
• html
• dom

Share Improve this question Follow edited Dec 17, 2012 at 6:44 Felix Kling 818k181181 gold badges1.1k1.1k silver badges1.2k1.2k bronze badges asked Dec 17, 2012 at 6:39 TonyTony 35411 gold badge33 silver badges1111 bronze badges 3

• 1 If you move the button away from under the div you remove, it works jsfiddle/mplungjan/edR2E – mplungjan Commented Dec 17, 2012 at 6:48
• When I try it in Chrome 24 Mac, I get both events logged. – Barmar Commented Dec 17, 2012 at 6:49
• <input type="text" onchange="setTimeout(function(){ console.log('onchange');$('#message').css('display','none'); }, 250);"/> <input type="button" onclick="setTimeout(function(){ console.log('onclick'); }, 250);" value="click me"/> – DDK Commented Dec 17, 2012 at 6:55

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

Its because you are changing the layout which changes the button position and the button mouseup event is not getting called. See Demo:

JS Bin

if you want to hide the div, by preserving the space it occupies, use:

$('#message').css('visibility','hidden');

New Demo with visibility hidden

For onclick it is necessary to occur mouse-down and mouse-up event due to position change of your button its not calling onclick

Here is Demo for plete event.

You're looking for keydown/press/up ...

The onkeydown event occurs when the user is pressing a key (on the keyboard)....

<div>
    <input type="text" onkeydown="console.log('onchange');$('#message').css('display','none');" >
    <div id="message">
        Validating
    </div>
    <br>
    <input type="button" onclick="console.log('onclick');" value="click me">
</div>​

here is the fiddle

http://jsfiddle/zQLFt/1/

The click event is bination of 2 events mousedown and mouseup. You can use mousedown instead.

<div>
    <input type="text" onchange="console.log('onchange');$('#message').css('display','none');" >
    <div id="message">
        Validating
    </div>
    <br>
    <input type="button" onmousedown="console.log('onclick');" value="click me">
</div>