Jquery .click function not working for button

Question

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?

Do both of those elements exist at the same time?

Sterling Archer
– Sterling Archer

2016-09-14 00:34:48 +00:00
Commented Sep 14, 2016 at 0:34 — Sterling Archer
– Sterling Archer, Commented Sep 14, 2016 at 0:34

KrishCdbry · Accepted Answer · 2016-09-14 01:02:57Z

2

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

edited Sep 14, 2016 at 1:02

answered Sep 14, 2016 at 0:37

KrishCdbry

1,05911 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

KrishCdbry Over a year ago

I have added sample demo also, It would be great if it helps you. Thanks

nnnnnn Over a year ago

Adding a .submit() handler wouldn't help unless that handler explictly cancels the default submit behaviour. Which could also be done from the .click() handler on the type="submit" button. (But yes, changing the button to type="button" is the best solution if no submission is required.)

naortor Over a year ago

if you are using this button to reset the form - consider giving it a reset type - <input type="reset" ... /> it will automatically clear all form's inputs

KrishCdbry Over a year ago

Yes right ! But what I explained is type submit and click function won't work parallelly. And thanks both @nnnnnn and naortor

KrishCdbry Over a year ago

Guyz !! Please up vote if you find this useful so that it will be motivating to help more people :) Thanks

Collectives™ on Stack Overflow

Jquery .click function not working for button

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related