jQuery click() to trigger HTML's OnClick property

Question

I have (had?) this Greasemonkey script that uses quite a bit of jQuery to set some defaults in a web form. The web form is a from an HP Wireless network controller, so I don't believe I can modify the HTML being generated.

The script was working just fine, until a Firefox update came along. Now, all jQuery click() and dblclick() calls are not working. They throw an exception:

Permission denied to access property 'length'

The HTML that I'm trying to "click" is:

<input id="plan_selection-1" type="radio" onclick="UpdateSectionStates();" value="valid_time" name="plan_selection">

I am using the follwoing jQuery to click:

$('#plan_selection-1').trigger("click");

I have tried a few different things (using .click(), which I gather is the same as .trigger("click"), sending an actual mouse event as described on jQuery click() not working in a Greasemonkey/Tampermonkey script, however this failed, as dispatchEvent() "is not a function".

This had been working up until a few weeks ago, but I haven't gone back to figure what exact version of FF last worked on.

Any direction or help is appreciated.

Have you tried doing the pure JS version? document.getElementById("plan_selection-1").click(); — Cheruvian
– Cheruvian, Commented Aug 1, 2014 at 18:01
You really should remove all inline JavaScript and just handle events with jQuery. — Jay Blanchard
– Jay Blanchard, Commented Aug 1, 2014 at 18:01
Is it just the .click() and .dblclick() calls that are not working or can jQuery not access the property of the object at all? What happens when you try console.log($('#plan_selection-1').length); ? — MSD
– MSD, Commented Aug 1, 2014 at 18:02

Cheruvian · Accepted Answer · 2014-08-01 18:04:03Z

2

There are a couple workarounds to this issue.

You can try to see if click events are working for pure JS

 document.getElementById("plan_selection-1").click();

Otherwise if you just want to set the element to selected and call your function...

document.getElementById("plan_selection-1").checked = true;
UpdateSectionStates();

You may want to test to see if JQuery is working at all by checking if the selector returns an element or not.

answered Aug 1, 2014 at 18:04

Cheruvian

5,9071 gold badge28 silver badges36 bronze badges

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

2 Comments

Tim AtLee Over a year ago

jQuery is working - other text fields are populated as expected. The pure JS approach worked great. Thanks!

Cheruvian Over a year ago

Weird, it's probably a jQuery issue with latest FF Update. You should report is so they're aware

ShaneQful · Accepted Answer · 2014-08-01 18:07:41Z

0

Have you tried to dispatch the events manually i.e. pure js

var input = $('#plan_selection-1')[0];
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window,
0, 0, 0, 80, 20, false, false, false, false, 0, null);
input.dispatchEvent(evt);

Explanation: this is the way you would trigger the event in pure js. Also you don't need to recreate the mouse evet you can dispatch the same one multiple times to different elements so if this works, you can create one mouse event and just replace every $('#plan_selection-1').trigger("click") with $('#plan_selection-1')[0].dispatchEvent(evt) in order to get your code to work.

edited Aug 1, 2014 at 18:07

answered Aug 1, 2014 at 18:02

ShaneQful

2,2862 gold badges18 silver badges24 bronze badges

Collectives™ on Stack Overflow

jQuery click() to trigger HTML's OnClick property

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related