单选按钮事件未触发

Question

我有2个模态对话框:

1. 包含物品
2. 包含这些项目的版本

当用户选择要查看的项目时,将检索该项目的当前版本.这些版本显示在模态对话框2的表格中.此表格中的每一行都包含1个版本.共有2列:

1. 单选按钮选择版本
2. 版本名称

因此,第二个模态对话框的这个表是在运行时生成的.这是我的代码:

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);
                }
            }
        }
    }
}

当用户选择项目时执行此功能,因此,使用它的版本生成第二个模态对话框.

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

当我单击/更改任何这些单选按钮时,它不会进入此功能.任何帮助赞赏.

Answer 1

将事件委托给静态父级:

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

当在DOM中动态创建/添加元素时,直接事件绑定不会注册绑定在其上的事件.

因此,在这种情况下,您需要将事件委托给您所在的最近的静态父级#component-version-modal.或者$(document)始终可以委派事件.