Triggering button click in jQuery not working

Question

Using dot.js I'm adding a button to a specific web page that, when clicked, should add some text to a text field and then trigger another button to also be clicked. I simulate this by adding a click handler to my button which has this code:

var button = $('.some-class').find('button')[0];
console.log(button); // element I expect
button.click();

However, this doesn't work and I'm not sure why. If instead of .click() I perform .remove(), the button is removed from the page. If I use the console to execute the same code, the button does get clicked. This tells me I do have the right element, but there is something wrong with the click() event specifically.

Can someone explain why this isn't working in either Safari or Chrome? I've tried a lot of different things, but I'm new to jQuery so I'm probably missing some detail in how that works.

The click event for button. And also how you bind the events to the buttons. — Arg0n
– Arg0n, Commented Dec 3, 2015 at 7:15
@Arg0n I don't attach that click event myself - I want the normal behavior that the web page has already defined for that button. I'm just loading some additional JavaScript on a web page I don't have control over otherwise. — Scott Berrevoets
– Scott Berrevoets, Commented Dec 3, 2015 at 7:21

Arg0n · Accepted Answer · 2015-12-03 08:47:21Z

1

We went to the bottom of this in the chat. What probably caused the problem was another event-handler attached to (possibly) body, that undid the click.

So the solution was to stop the event from propagating:

event.stopPropagation();

answered Dec 3, 2015 at 8:47

Arg0n

8,4532 gold badges26 silver badges39 bronze badges

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

1 Comment

Scott Berrevoets Over a year ago

Yep, putting this as the first line of the event handler did the trick

Community · Accepted Answer · 2017-05-23 10:27:10Z

0

While assigning the click event handler to the button you should use jquery on This should ensure that whenever a new button with added with same selector (as in when event was assigned), event handled will be assigned to that button

Some examples here

edited May 23, 2017 at 10:27

CommunityBot

11 silver badge

answered Dec 3, 2015 at 7:08

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

2 Comments

Scott Berrevoets Over a year ago

I read about that, but my problem is not that the event handler isn't called. If I use remove() instead of click() the button is removed, which tells me the event handler is called as expected.

gurvinder372 Over a year ago

@ScottBerrevoets remove button only removes the dom element for that event doesn't need to be binded. But for an event binding to work, normaly the element needs to be present first. In your case you are adding a button on the fly, so you need to use jquery on.

Colin Watson · Accepted Answer · 2015-12-03 07:15:38Z

0

The problem is the click() function is from jquery and you're attempting to fire the click function from the DOM object.

Try

$(button).click();

Here's a plunk. http://plnkr.co/edit/2pcgVt

answered Dec 3, 2015 at 7:15

Colin Watson

12 bronze badges

Comments

Vishal Gurav · Accepted Answer · 2015-12-03 07:59:51Z

0

You can use the following statement.

var button = $('.some-class').find('button')[0].trigger('click');

answered Dec 3, 2015 at 7:59

Vishal Gurav

1

Comments

madalinivascu · Accepted Answer · 2015-12-03 08:33:42Z

0

try jquery's trigger() function:

$(button).trigger('click');

see jsfiddle: https://jsfiddle.net/665hjqwk/

edited Dec 3, 2015 at 8:33

answered Dec 3, 2015 at 7:31

madalinivascu

32.4k4 gold badges42 silver badges59 bronze badges

Collectives™ on Stack Overflow

Triggering button click in jQuery not working

5 Answers 5

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related