Question

我有2个模态对话框：

包含项目
包含这些项目的版本

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

用于选择版本的单选按钮
版本名称

因此，第二个模态对话框的这个表是在运行时生成的。这是我的代码：

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

单选按钮事件未触发

2 个答案: