单选按钮事件未触发

Question

我有两个模态对话框：

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

当用户选择要查看的项时，将检索该项的当前版本。这些版本显示在模态对话框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)。

Answer 2

试着这样做

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