单选按钮事件未触发

Radio button event not firing

本文关键字：事件 单选按钮      更新时间：2023-09-26

>我有 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 {
        ...
    }
});

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

将

事件委托给静态父级： 

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

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

因此，在这种情况下，您需要将事件委托给最接近的静态父#component-version-modal，这是您的情况。或者$(document)始终可用于委派事件。

尝试这样做

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