JQuery: trigger() not calling related target

Question

I have used the trigger() for checking the radio button after loading all the page content as the radio button value is coming from third party api.

I have make one option checked by default. So I used trigger() event for checking the radio button. The radio button have also it's click event.

In my code only radio button get selected but event is not firing. my code is...

jQuery(document).ready(function($) {
    jQuery("#btn_03").attr('checked', 'checked');

    jQuery("#btn_03").trigger("change");

    jQuery(".class input[type='radio']").live("change", function($) {
        alert("clicked");
    });
});

Answer 1

You need to assign the event handler before you trigger the event.

When you are actually triggering the event, you still haven't attached any listeners for that event. You are doing that in the next line. Thus the event change does get triggered but nothing happens on that event.

You can do it this way

jQuery(document).ready(function($) {
    jQuery("#btn_03").attr('checked', 'checked');

    jQuery(".class input[type='radio']").on("change", function($) {
        alert("clicked");
    });

    jQuery("#btn_03").trigger("change");
});

Also use "on" to bind events instead of "live" as per the latest jQuery documentation