Onclick event of the radio button (created dynamically) is not responding

Question

I ve one dropdownlist & two textboxes. Once I fill them, (on click of a button) I want to append them in a table row dynamically along with a radio button as the third column.

The below code is working, but not sure why the onclick event of radio button is not responding. I am using MVC 3.0.

I ve noticed that onclick event is still working, but the clicked radio button is not getting checked, keeping other radio buttons unchecked.

 function Contact_OnAddTelephone() {

    var type = $("#rdoTelephoneType").val();
    var areaCode = $("#txtAreaCode").val();

    var radio = $('<input>').attr({
        type: 'radio', id: 'rdoTelePrimary', name: 'rdoTelePrimary', onclick: 'alert("a");this.checked' 
    });
    $('#tableTelephone tr:last').after("<tr><td>" + type + "</td><td>" + areaCode + "-" + number + "</td><td>" + radio[0].outerHTML + "</td></tr>");
}

Here on click still I can see the alert getting fired, but this.checked is not working

At least in this snippet you are not setting up a click handler. Please also include the click handler setup code. — Daniel Baulig, Aug 09 '11 at 11:29
By "onclick even" you mean your custom event function or its native function? — chaZm, Aug 09 '11 at 11:30
@ chaZm : I m indicating native Onclick event of radio button. — Biki, Aug 09 '11 at 12:02

score 1 · Answer 1 · answered Aug 09 '11 at 12:26

1

If You insert the control dynamically, jQuery live can be used.

Here's a quick example:

$('#rdoTelePrimary').live('click', function () {
    // do your stuff here...
});

answered Aug 09 '11 at 12:26

veidelis

149
3
17

score 0 · Answer 2 · answered May 18 '16 at 15:18

Try this:

function Contact_OnAddTelephone() {
    var type = $("#rdoTelephoneType").val(),
        areaCode = $("#txtAreaCode").val(),
        radio = $('<input>').attr({
           type: 'radio', 
           id: 'rdoTelePrimary', 
           name: 'rdoTelePrimary', 
           onclick: 'myRadioButtonClickFunction' 
         });

    $('#tableTelephone tr:last').after("<tr><td>" + type + "</td><td>" + areaCode + "-" + number + "</td><td>" + radio[0].outerHTML + "</td></tr>");
}

function myRadioButtonClickFunction(){
   // do stuff
}

NB: Not tested.

By the way, you might want to use camelCase on function names.

Onclick event of the radio button (created dynamically) is not responding

2 Answers2