Reputation: 354
Steps to recreate this issue:
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>
Upvotes: 4
Views: 2825
Reputation: 166
The click event is combination 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>
Upvotes: 0
Reputation: 28578
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 complete event.
Upvotes: 2
Reputation: 36541
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
Upvotes: 0
Reputation: 12693
Its because you are changing the layout which changes the button position and the button mouseup event is not getting called. See Demo:
if you want to hide the div, by preserving the space it occupies, use:
$('#message').css('visibility','hidden');
New Demo with visibility hidden
Upvotes: 5