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() ?

Answer 1

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