Tony
Tony

Reputation: 354

onclick event does not get triggered after onchange

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

Upvotes: 4

Views: 2825

Answers (4)

Kashif Naseem
Kashif Naseem

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

Zaheer Ahmed
Zaheer Ahmed

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

bipen
bipen

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

http://jsfiddle.net/zQLFt/1/

Upvotes: 0

Akhil Sekharan
Akhil Sekharan

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:

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

Upvotes: 5

Related Questions