Matt B Matt B - 2 months ago 6
HTML Question

Jquery .click function not working for button

I have the code

$('#resetbtnB').click(function() {
$('#bgfade').fadeIn('slow');
$('#webpopup').fadeIn('slow');
});


This will work if 'resetbtnB' is for example a paragraph or an image. However it does not work when 'resetbtnB' is an input button.

E.g.

Works with

<p id="resetbtnB"> Reset </p>


Not with

<input type="submit" value="Reset" name="resetbtnB" id="resetbtnB"/>


Why does this code not work for an input button and how can I change it to work?

Answer

Because type="submit" also triggers submit event when it is inside form so it is overriding click event. So either try to remove type "submit" and put "button" write like this

<input type="button" value="something" name="resetbtnB" id="resetbtnB"/>

Or write jquery function .submit

Docs : https://api.jquery.com/submit/

Demo : https://jsbin.com/morisob/9/edit?html,js,output