Combine an HTML attribute onClick function with a jQuery On function?

Question

There's a site I'm working on with legacy onclick functions on input elements:

<input name="input_41" type="radio" value="76" id="choice_41_1" onclick="gf_apply_rules(5,[6,7,8]);">

Unfortunately, I can't change or modify the legacy code directly.

I'm also trying to update the site and make the form elements prettier with additional CSS and JS. One of the new functions I'm using to handle radio elements uses the jQuery On() function. This function works well but appears to override the existing onclick function gf_apply_rules(). Here is an example of the jQuery:

$(document).on('click.radio.data-api', '[data-toggle^=radio], .radio', function (e) {
    var $radio = $(e.target);
    e && e.preventDefault() && e.stopPropagation();
    if (!$radio.hasClass('radio')) $radio = $radio.closest('.radio');
    $radio.find(':radio').radio('toggle');
});

Is there anyway I can keep the existing HTML specified onclick function firing with On()?

I know that you can do multiple functions per onclick. You would format it like this onclick="css(),On()", though I've never personally tried a CSS change and a jQuery function at the same time. — usernolongerregistered
– usernolongerregistered, Commented Oct 31, 2013 at 17:57
Ah, I should have mentioned that I need to avoid changing the legacy code. — jnthnclrk
– jnthnclrk, Commented Oct 31, 2013 at 17:58
Oh I see. So you want the HTML to be left unchanged, but want to also call the jQuery function onclick? — usernolongerregistered
– usernolongerregistered, Commented Oct 31, 2013 at 17:58
You're using preventDefault and stopPropagation, which will probably stop the onclick from firing. — ithcy
– ithcy, Commented Oct 31, 2013 at 17:59

Code Monkey · Accepted Answer · 2013-10-31 17:58:14Z

6

The e.preventDefault() will prevent the original (older) onclick handler. Did you try removing that line to see if both event handlers get called. . . ?

answered Oct 31, 2013 at 17:58

Code Monkey

6431 gold badge6 silver badges18 bronze badges

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

2 Comments

jnthnclrk Over a year ago

That's it. No need to combine, commenting out e.preventDefault() as you suggest solves it and preserves my legacy code.

Code Monkey Over a year ago

Great. I'll take some points for 'accepted answer' so that I can eventually lose them the next time I hate on Internet Explorer CSS rendering issues in the future on Stackoverflow :)

Collectives™ on Stack Overflow

Combine an HTML attribute onClick function with a jQuery On function?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related