CODEWITHSUNDEEP
javascriptjquery
wmash
wmash

Reputation: 4202

Radio button event not firing

I have 2 modal dialogs:

  1. Contains items
  2. Contains the versions of those items

When the user selects an item to view, the current versions of that item are retrieved. These versions are displayed in a table on modal dialog 2. Each row in this table holds 1 version. There are 2 columns:

  1. Radio button to select the version
  2. Version name

So, this table of the 2nd modal dialog is produced at run time. This is my code:

jQuery/JS

function showComponentVersionModal(assocComs ,p, comVersions, comVersionArray) {
    $('#component-versions-modal .modal-body tbody').find('tr:gt(0)').remove();
        var winW = window.innerWidth;
        for (var j in comVersions) {
            if (comVersions[j].title === p.text()) {
                var newRow = '<tr>' +
                                 '<td><input name="versionCheck" type="radio"/></td> ' +
                                 '<td></td>' +
                             '</tr>';
                if ($('#component-versions-modal .modal-body tbody tr:last td:nth-child(2)').text() !== comVersions[j].version) {
                    $('#component-versions-modal .modal-body tbody tr:last').after(newRow);
                    $('#component-versions-modal .modal-body tbody tr:last td:nth-child(2)').text(comVersions[j].version);
                }
            }
        }
    }
}

This function is executed when the user selects an item and, therefore, produces the 2nd modal dialog with it's versions.

$('input[name="versionCheck"]').on('change', function() {
    if ($(this).prop('checked').length <= 0) {
        ...
    } else {
        ...
    }
});

When I click/change any of these radio buttons, it does not go into this function. Any help appreciated.

Upvotes: 0

Views: 44

Answers (2)

Pavan Teja
Pavan Teja

Reputation: 3202

try doing like this

$(document.body).on('change','input[name="versionCheck"]', function() {
//your code
});

Upvotes: 0

Jai
Jai

Reputation: 74738

delegate the event to static parent: 

$('#component-versions-modal').on('change', 'input[name="versionCheck"]', function() {

When the elements are dynamically created/added in the DOM then direct event binding doesn't register the events bound on it.

So, in this case you need to delegate the event to the closest static parent #component-version-modal which is in your case. Or $(document) which is always available to delegate the events.

Upvotes: 5

Related Questions