jQuery点击事件异常求助：toggleClass前两次失效，仅奇数点击生效

首先，咱们来拆解你的代码里导致这个奇怪问题的核心原因：

1. 错误使用eval()完全没必要，还会引发问题 #

你已经通过document.getElementById(iconID)拿到了DOM元素y，但却用$(eval(y))来包装成jQuery对象——这完全是画蛇添足。eval(y)会把DOM对象转换成字符串（类似[object HTMLDivElement]），再执行这个字符串，最终得到的结果根本不是你想要的DOM元素，这会导致jQuery选择器无法正确定位元素，事件绑定的逻辑已经出现了偏差。

2. 重复绑定click事件是罪魁祸首 #

如果你的NewShowHideDiv2函数被调用了多次（比如页面初始化时执行了多次，或者动态渲染元素后重复调用），那么每次调用都会给同一个iconID元素叠加绑定一个新的click事件处理器。

举个例子：如果函数被调用了2次，那么点击一次图标时，toggleClass("clicked")会被执行2次——第一次添加类，第二次立刻移除，看起来就像没反应；第二次点击时，又执行2次，还是回到初始状态；第三次点击时，若函数被调用了2次以上，执行次数叠加后就会呈现出「奇数点击生效」的效果，这正好和你描述的现象完全匹配。

修正后的代码与解决步骤 #

步骤1：移除无用的eval()，直接使用DOM元素 #

步骤2：绑定事件前先解绑，避免重复绑定 #

步骤3：简化逻辑，确保事件只绑定一次 #

修正后的代码如下：

function NewShowHideDiv2(iconID, divID, disabled) {
    // 直接通过ID选择器获取jQuery对象，不需要额外的DOM操作
    const $icon = $('#' + iconID);
    const $targetDiv = $('#' + divID);

    // 先解绑之前可能绑定的click事件，再绑定新的，彻底避免重复绑定
    $icon.off('click').on('click', function() {
        console.log($icon);
        $icon.toggleClass("clicked");
        $targetDiv.slideToggle("slow");
    });
}

额外优化建议： #

如果你的元素是动态生成的，建议使用事件委托来绑定事件，这样就不用担心重复绑定的问题，而且能兼容动态创建的元素：

// 绑定到静态的父元素（比如document，或者更接近目标元素的静态容器）
$(document).on('click', '#' + iconID, function() {
    $(this).toggleClass("clicked");
    $('#' + divID).slideToggle("slow");
});

这种方式只会绑定一次事件，不管元素什么时候被创建，都能正常触发逻辑。

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