jQuery嵌套点击事件问题：动态列表OK选项后加号点击无响应

嘿，我瞅到你遇到的问题啦，咱们来拆解一下为啥点击加号没反应，以及怎么修复～

核心问题1：选择器错误 #

你在给加号图标绑定点击事件的时候，plus_id是类似plus-div-1这样的ID字符串，但jQuery的事件委托选择器需要明确是ID选择器（要加#前缀）。你原来的代码里直接用plus_id作为选择器，jQuery会把它当成标签名找，自然找不到对应的元素，所以点击事件根本没绑定成功。

核心问题2：重复绑定事件隐患 #

每次点击OK单选框，你都会执行一次$(document).on('click', ...)，这会导致同一个加号元素被绑定多次点击事件，后续点击时会触发多次回调，这是个隐藏的bug。

方案一：修正嵌套绑定的写法 #

把选择器改成带#的ID选择器，同时每次绑定前先解绑旧的事件，避免重复绑定：

$(document).on('click', '[id^=radio]', function(){
    var userresp = this.value;
    var fout_id = $(this).attr('id');
    var index = fout_id.split('-')[1];
    
    if (userresp == 'ok') index= parseInt(index)+ 1;
    if (userresp == 'fout') index= parseInt(index)+ 0;
    if (userresp == 'nvt') index= parseInt(index)- 1;
    
    var afw_id = 'afw-div-' + index;
    var pos_id = 'pos-div-' + index;
    var plus_id = 'plus-div-' + index;
    
    console.log('radio clicked', userresp, index);
    
    if (userresp=='fout') {
        $('#' + afw_id).slideDown();
        $('#' + pos_id).slideUp();
        $('#' + plus_id).hide();
    } else if(userresp=='ok'){
        $('#' + afw_id).slideUp();
        $('#' + plus_id).show();
        
        // 先解绑旧事件，再绑定新事件，避免重复触发
        $(document).off('click', '#' + plus_id).on('click', '#' + plus_id, function(){
            console.log('test');
            // 这里可以写你要触发的下拉框显示逻辑，比如 $('#' + pos_id).slideToggle();
        });
    }else{
        $('#' + plus_id).hide();
        $('#' + afw_id).slideUp();
        $('#' + pos_id).slideUp();
    }
});

方案二：优化事件委托（更推荐） #

其实没必要把加号的点击事件嵌套在单选框的点击事件里，直接一开始就把加号的事件委托给document，然后通过元素的状态（比如是否显示）来控制是否触发逻辑，这样代码更清晰，也不会有重复绑定的问题：

// 先绑定加号的点击事件
$(document).on('click', '[id^=plus-div-]', function(){
    // 这里可以通过当前加号的ID获取对应的index，进而找到pos-div
    var plusId = $(this).attr('id');
    var index = plusId.split('-')[2];
    var pos_id = 'pos-div-' + index;
    
    console.log('test');
    $('#' + pos_id).slideToggle(); // 示例：切换下拉框显示/隐藏
});

// 再处理单选框的点击逻辑
$(document).on('click', '[id^=radio]', function(){
    var userresp = this.value;
    var fout_id = $(this).attr('id');
    var index = fout_id.split('-')[1];
    
    if (userresp == 'ok') index= parseInt(index)+ 1;
    if (userresp == 'fout') index= parseInt(index)+ 0;
    if (userresp == 'nvt') index= parseInt(index)- 1;
    
    var afw_id = 'afw-div-' + index;
    var pos_id = 'pos-div-' + index;
    var plus_id = 'plus-div-' + index;
    
    console.log('radio clicked', userresp, index);
    
    if (userresp=='fout') {
        $('#' + afw_id).slideDown();
        $('#' + pos_id).slideUp();
        $('#' + plus_id).hide();
    } else if(userresp=='ok'){
        $('#' + afw_id).slideUp();
        $('#' + plus_id).show();
    }else{
        $('#' + plus_id).hide();
        $('#' + afw_id).slideUp();
        $('#' + pos_id).slideUp();
    }
});

这样改完之后，点击加号图标就能看到控制台输出"test"啦～

内容的提问来源于stack exchange，提问作者twan