CODEWITHSUNDEEP
jquerybuttontextbox
Vinay Pratap Singh Bhadauria
Vinay Pratap Singh Bhadauria

Reputation: 9947

Textbox change stopping button click in Jquery

I am having a strange behavior with a textbox

I am having a textbox and button on page both of them have change and click event respectively. Both even work individually, but when I click the button after changing the value on textbox the click event does not fire.

$("#txtInput").on("blur", function onChange() {
    var randomVal = Math.floor((Math.random() * 100) + 1);
    $('#log').append('<p>New value: ' + randomVal + '</p>');
    return true;
});


$("#btn-submit").on("click", function submit() {
    alert('value submitted');
});

Help me understand this.

Here is a link for the jsfiddle https://jsfiddle.net/WV3Q8/25/.

Upvotes: 0

Views: 282

Answers (1)

Anoop Joshi P
Anoop Joshi P

Reputation: 25537

Place the button above the result div. Because, blur event happens before the button click event, which results in the movement of button downwards.(For a click event to be fired, both mouse down and mouse up happens on the same element.) That is why it is not fired. 

<p>Enter something</p>
<input type="text" id="txtInput">
<button value="Go" style="display:block" type="button" id="btn-submit">Submit</button>
<div id="log"></div>

Fiddle

Upvotes: 1

Related Questions