Cannot programmatically trigger jQuery click event

Question

If I understand correctly, to programmatically trigger a jQuery click event attached to an object with a css class of my-button, you should be able to just do this:

$('.my-button').click();

For some reason, this code is failing to trigger the click event attached to the element. The $('.my-button') part of the code is working and returning one element. We know the event handler is attached to that element because clicking on the element does trigger its event handler's code. The handler is attached with the following simple code:

$('<a class="my-button"/>')
    .click(function() { /* code here */ })
    .appendTo(parent);

Are there any conditions where event triggering does not work? The element being accessed is created through a jQuery widget, the widget code is retrieved through a cross-domain JSONP call and run through eval (the factor I suspect).

Solution 1

This turned out to be a case of two jQuery scripts being loaded. The script retrieved via JSONP included the loading of jQuery, and that jQuery object was used to attach the event handler. Meanwhile, in my co-worker's web page, he had loaded his own jQuery. Therefore, this second jQuery object, having no knowledge of the first's event handlers, was unable to programmatically invoke the handler.

Solution 2

You should use:

$('.my-button').trigger("click");

Solution 3

I don't know if cross-domain JSONP has something to do with it, however I must say that programmatically triggering a click event on a selector that has to do with an html link (<a href='...'>...</a>) doesn't work.

I suspect it has to be some sort of browser policy, so as to block pop ups. Consider the fact that browsers, have a mechanism to track and block pop ups and mostly allow the user authorize a click action before the new link appears.

If you could programmatically click a link via jQuery, redirection, popups and all that stuff would be easier to do, hence it's not possible. Just to be clear:

<a class='test' href='http://www.example.com'>Link1<a/> you cannot trigger that.

<a class='test2'>Link2</a> you can trigger an onclick here, because it doesn't contain href.

Solution 4

I had the same problem and changing the way I bound the event to the function fixed it

  var f=function() { .... }
  $('input.radioDomande').click(f);
  ...
  $(s+data.domanda[i].valore).trigger("click");
  //WRONG: It won't trigger the event

then changed the binding according to the example in http://api.jquery.com/trigger/

  var f=function() { .... }
  $('input.radioDomande').bind('click', f);
  ...
  $(s+data.domanda[i].valore).trigger("click");
  //IT DOES TRIGGER THE EVENT

Solution 5

My best guess is the handler is bound after you are trying to trigger the event.

Try:

var myButtons = $('<a class="my-button"/>)
                    .click(function() { /* code here */ })
                    .appendTo(parent);

myButtons.click();

or using your original code - trigger the event in the callback of your JSONP request.

View more solutions

Comments

[Jacob]

We tried using .trigger('click'); that also didn't work. They do the same thing, anyway.

[simshaun]

Try binding a .live('click', ...) event on the page that the widget is loaded in to, just to see if its a problem with the widget being loaded in and eval'd.

[Jacob]

I had the same thought, but the programmatic triggering is definitely taking place after the handler has been bound. The triggering takes place in the click event of another a in the page.

[Jacob]

The click event handler is working find. Clicking the link works. Programmatically triggering it doesn't.

[simshaun]

Docs say "Although .trigger() simulates an event activation, complete with a synthesized event object, it does not perfectly replicate a naturally-occurring event." Trying to figure out what that means exactly, but perhaps its related.

[Eric]

@Jacob: are they descendants of each other?

[IgorGanapolsky]

Yeah I'm trying to call .trigger('click') on an img inside of a <li>, and I get an error: "TypeError: Object #<an HTMLImageElement> has no method 'trigger'".

[krillgar]

Thanks. This was the solution that helped me out. I was doing the same process, one was triggering an AJAX call that worked, and on another page I didn't need the AJAX, and set it up as a regular link. That didn't work. To get mine to work and reload the entire page, I had to set the document.location equal to the href attribute of the link.

[Rakesh Juyal]

Oh God! I was struggling with the same issue. In my case too I had multiple instances of jQuery.