30

I have some elements

<input type="text" id="test_value" name="test_value" value="xyz" />
<input id="test_default" name="test_default" type="checkbox" onclick="with(this.form.elements['test_value']) { disabled = this.checked; if (this.checked) { value = ''; } else {if(value=='') {value=' '; value = '';}}};" />

The inline onclick is generated by a CMS which I have no control of. I want to execute $("#test_default").click(); with jQuery but that doesn't work because it's not bound to the jQuery event manager.

I've been trying variations of:

$("#test_default").click(function (e) {
                    $(e.target).attr("onclick").apply(checkbox, [e]);
                    return false;
                }).click();

but with no avail. Please Help.

There are dozens of different functions that may be in inline in the onclick. It isn't really an option to duplicate them and run them in parallel.

The answers work in a small demo but not in the live environment. Please look at http://jsfiddle.net/GtJjt/ I need the checkbox to be triggered programatically.

Bizarrely only $("#metadata_field_text_10190_default")[0].click(); triggers the event correctly. Can anyone explain this?

Improve this question
1
  • There is no type on <input id="test_value" name="test_value" value="xyz" />. You probably must bind click() or use live(). Commented Jan 7, 2011 at 10:45

4 Answers 4

Reset to default
45

Call the native DOM's onclick directly (see demo):

$("#test_default")[0].onclick();

Or, without jQuery at all,

document.getElementById("test_default").onclick();

Update:

The actual problem is with the interaction between jQuery's .click() and the inline onclick code. jQuery's .click() actually does two things: it first triggers any event handlers, including the inline onclick code, then it causes the checkbox to become checked.

The problem arises because the inline code tests whether the checkbox is checked. Because this is triggered first, the code finds that the checkbox isn't checked, and doesn't do anything. Now after this is finished, jQuery then goes and checks the checkbox.

How do we fix this? We check the checkbox manually first, then call the inline handler. Unfortunately, we can't use jQuery's .click() to call the inline handler, because it will uncheck the checkbox again (it will also call other jQuery-bound event handlers if you add these in the future, you probably don't want that). Therefore we use the native DOM method I described earlier, since its only effect is to run the inline code.

Final code is this:

$("#metadata_field_text_10190_default").attr("checked", true)[0].onclick();

See demo: http://jsfiddle.net/GtJjt/3/. (I included a console.log in the inline code for the demo to prove that the inline code was running. Remove this if your browser is not Firefox or Chrome or it will crash).

Update again:

I didn't see your solution earlier Simon, thanks for reminding me about [0].click(). Essentially it is the native equivalent for jQuery's .click() and works because it does what I described above (checking the checkbox first, and then calling the inline code). A warning though: this will also call any event handlers bound with jQuery, which may not be what you want.

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

1 Comment

Great. Thanks for clarifying my main code is within a $("input[type=checkbox]:checked").each(function() {}); so works anyway. Glad to fix this one.
5

I used the trigger in html with onclick event as follows:

$("#test_default").trigger("onclick");
Improve this answer

3 Comments

This worked for me. But instead of using .trigger("onclick"), I used .trigger("click"). Thanks again!
it's a pleasure to meet you @AnneLagang
this is better.
4

Just don't return false and it'll get called:

$("#test_default").click(function (e) {
  //hi!
}).click();

If you want to prevent a default action, use e.peventDefault() instead, which won't kill the event. Also, with respect to your inline onclick handler (why not do it all unobtrusively?), I strongly recommend against using with.

Improve this answer

6 Comments

It's generated by a CMS, the bane of HTML standards.
Thanks. This works too. But @Box9 got in a minute before and uses less characters. Yours does have the advantage of being able to use the .click() method later. Cheers.
@Simon - Less characters != more correct, why would you kill an event you didn't need to? If you want less characters and don't have anything else in your handler $("#test_default").click(), but that wasn't what you asked :)
Nick, your answer binds a second handler and triggers it, while @Simon's question appears to ask simply how to trigger the inline onclick attribute. While jQuery's .click() should trigger this inline code, I imagine there's something else going on that is stopping it since Simon said that $("#test_default").click(); doesn't work. If that's the case I don't see how this answer is any different, and why any binding is necessary.
@Simon - It does work, it's n ordering issue, I'd use onchange inline here, then click with jQuery (if possible), like this: jsfiddle.net/nick_craver/GtJjt/4
|
1

I use the next code:

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

In your case:

 $("#test_default")[0].click();
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.