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).

Answer 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.

Answer 2

You should use:

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

Answer 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.

Answer 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

Answer 5

Odd. Have you tried .trigger('click')? Theoretically, they should be the same (looking into jQuery code right now to find out). Edit: It appears .click() is simply a proxy for .trigger('click'), so it probably won't help.

For debugging, try to bind a live click event on the page that the widget is loaded in to.

Answer 6

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.

Answer 7

If it does not recall the events, especially the custom, which are properly recorded, it is likely that the jQuery library is loaded again, after you assign an event handler.

Check your code using:

jQuery (document).ready (function () {
    // Test your code here
});

Answer 8

I also ran into this but I did not have multiple jQuery.

Reading through the answers here I realized it was because of the order of execution. I was binding the event handler a few lines after I had the function that invoked the click.

It was a DOH! moment...

Answer 9

Go back to the dom and do it with:

$("abutton")[0].click();