JQuery injecting click()

Question

I am currently building a browser extension that injects javascript/jquery into certain pages, and i am having a weird issue, where forcing .click() events are not working from my injected code. The strange bit is that it works completely fine if i make the call from my console js console.

I dont really understand what the problem is. It seems that all of my other calls are working fine. I can bind to click events using .click(function(){...}) (so clearly my jquery has been loaded properly), and call methods when things are clicked (so clearly my jquery has been loaded properly), but the second that i try to force a click, the call just does not go through.

Can anybody explain what is happening, or a way that i can get around it?

(i can not recreate this issue, because the problem clearly has to do with injecting the js in an extension)

this is the best i can do for recreation:

//I have tried all of these separately 
console.log($("#this_is_an_id"))  //This returns the correct element

$("#this_is_an_id").click()       //This does not work at all

$("#this_is_an_id").trigger("click") //I have also tried this without success

$("#this_is_an_id").click(function(){ console.log("stuff") }) //This works fine.

Really, at this point, i am assuming it is not my fault, but something that is wrong with the browser's method of injecting script. I am sorta looking for really hackey ways to fix this, i also tried eval('$("#this_is_an_id").trigger("click")'). Does anybody have any other suggestions?

show the markup that it is not working for.. the code that you are executing etc.. how can you expect us to shoot in the dark? — Baz1nga, Apr 30 '12 at 01:42
... there is no way i can recreate this error on other people's computers because it is based on injected javascript. The problem clearly has something to do with injecting javascript. This is not an unreasonable question. — BananaNeil, Apr 30 '12 at 02:39
@BananaNeil then at least show us the code that injects the script. having a lit candle is better than none when in the dark. — Joseph, Apr 30 '12 at 02:41
If your last example works fine then why not use that, what are you trying to do? — Hogan, Apr 30 '12 at 03:05
i'm trying to force a click, not call a function when something is clicked. the last example just calls something when it is clicked.. i am actually trying to click it. — BananaNeil, Apr 30 '12 at 03:07
I see. Are you sure you are waiting till all javascript has been loaded on the page? Maybe the handler is not loaded when your click() is called. Also read this (http://stackoverflow.com/a/1839395/215752) it may not be a javascript handler. — Hogan, Apr 30 '12 at 03:09
Hogan: it is really not a problem that my handler is not loaded, i can log the element exactly the same time that i can force a click, it is just not working because apparently injecting code does not allow triggers maybe? I think that is the conclusion that i am coming to. — BananaNeil, Apr 30 '12 at 03:17
look, i am not crazy = http://stackoverflow.com/questions/9620449/jquery-simulating-click-button-doesnt-trigger-function someone else has experienced this same issue, and noone helped him either. O_O — BananaNeil, Apr 30 '12 at 03:24
ok I'll ask the obvious question, what do you have under content scripts in your manifest? — Hogan, Apr 30 '12 at 03:53
`["jquery.js", "my_js_file.js"]` the majority of my program is working, this is just a strange error, that is definitely a browser issue. I just ran a test where i ran nothing but one forced click on an element ten seconds after the page loaded, logging before and after the call. The logs ran, but the click() did not. — BananaNeil, Apr 30 '12 at 05:18

score 2 · Accepted Answer · edited May 23 '17 at 10:24

I finally found a very excellent answer/work around to this issue here: Trigger events from Firefox browser extension?

From user cms:

First of all, for click events, you need to create an event object with type MouseEvents, not HTMLEvents, and use event.initMouseEvent instead of event.initEvent.

To access the document of the current tab of Firefox from a XUL overlay, you can use the content.document property, but since you already have access to the DOM element you want to click, you can use the Node.ownerDocument property, which will refer to the top-level document object for this node.

I have made a simple function to simulate MouseEvents:

function triggerMouseEvent(element, eventName, userOptions) {
  var options = { // defaults
    clientX: 0, clientY: 0, button: 0,
    ctrlKey: false, altKey: false, shiftKey: false,
    metaKey: false, bubbles: true, cancelable: true
     // create event object:
  }, event = element.ownerDocument.createEvent("MouseEvents");

  if (!/^(?:click|mouse(?:down|up|over|move|out))$/.test(eventName)) {
    throw new Error("Only MouseEvents supported");
  }

  if (typeof userOptions != 'undefined'){ // set the userOptions
    for (var prop in userOptions) {
      if (userOptions.hasOwnProperty(prop))
        options[prop] = userOptions[prop];
    }
  }
  // initialize the event object
  event.initMouseEvent(eventName, options.bubbles, options.cancelable,
                       element.ownerDocument.defaultView,  options.button,
                       options.clientX, options.clientY, options.clientX,
                       options.clientY, options.ctrlKey, options.altKey,
                       options.shiftKey, options.metaKey, options.button,
                       element);
  // dispatch!
  element.dispatchEvent(event);
}

Usage: triggerMouseEvent(element, 'click');

Check a test usage here.

You can pass also an object as the third argument, if you want to change the values of the event object properties.

Thank you so much for this answer. O_O

JQuery injecting click()

1 Answers1

Linked