0

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.

Scott Berrevoets
  • 16,921
  • 6
  • 59
  • 80
  • Where is the `click` event? – Arg0n Dec 03 '15 at 07:09
  • @Arg0n Not sure which `click` event you mean? – Scott Berrevoets Dec 03 '15 at 07:13
  • The `click` event for `button`. And also how you bind the events to the buttons. – Arg0n Dec 03 '15 at 07:15
  • Check out this working fiddle: http://jsfiddle.net/Arg0n/hsqv1nyz/ – Arg0n Dec 03 '15 at 07:17
  • @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 Dec 03 '15 at 07:21
  • What is the "normal behavior" of the button then? See this updated fiddle with "normal" button in form: http://jsfiddle.net/Arg0n/hsqv1nyz/2/ – Arg0n Dec 03 '15 at 07:21
  • It displays some other UI element that was previously not visible. I want the button I add to the web page to do the same thing and I figured it would be easiest if I just simulated a click on the button that already does that. – Scott Berrevoets Dec 03 '15 at 07:23
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/96855/discussion-between-arg0n-and-scott-berrevoets). – Arg0n Dec 03 '15 at 07:24

5 Answers5

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();
Arg0n
  • 8,283
  • 2
  • 21
  • 38
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

Community
  • 1
  • 1
gurvinder372
  • 66,980
  • 10
  • 72
  • 94
  • 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. – Scott Berrevoets Dec 03 '15 at 07:12
  • @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. – gurvinder372 Dec 03 '15 at 07:14
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

Colin Watson
  • 1
  • 2
0

try jquery's trigger() function: 

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

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

madalinivascu
  • 32,064
  • 4
  • 39
  • 55
0

You can use the following statement.

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

Vishal Gurav
  • 1