jQuery绑定按钮点击事件首次点击无响应、第二次才触发如何解决

问题根因 #

你的逻辑是绑定了类on的存在判断来切换显隐，但初始状态下#1、#2两个元素默认没有on类，且本身是显示状态，首次点击会触发else分支，执行show()（此时元素本来就是显示的，所以看不到任何效果）同时加上on类，第二次点击才会匹配if分支执行隐藏逻辑，就出现了首次点击无效的问题。

修复方案 #

方案1：调整判断逻辑适配初始状态 #

直接把判断分支反过来，匹配初始无类、元素显示的状态即可：

$("#hide_ico").click(function(event) {
    var c = 'on';
    if ($("#1,#2").hasClass(c)) {
        // 有on类说明之前已经隐藏过，现在要恢复显示
        $("#1,#2").show();
        $("#1,#2").removeClass(c);
    } else {
        // 无on类是初始状态，点击要隐藏
        $("#1,#2").hide();
        $("#1,#2").addClass(c);
    } 
});

方案2：用jQuery内置方法简化逻辑 #

不需要自己维护类判断，直接调用toggle()方法自动切换显隐状态，代码更简洁：

$("#hide_ico").click(function(event) {
    $("#1,#2").toggle();
});

如果还需要保留on类做其他样式控制，可以和toggleClass结合使用：

$("#hide_ico").click(function(event) {
    $("#1,#2").toggle().toggleClass('on');
});

补充注意点 #

如果你的#1、#2元素是3D视图动态生成的热点，需要确认绑定点击事件的时候，这两个元素已经渲染完成，否则可能出现选择器匹配不到的问题，可以在绑定事件前加一行日志验证：

console.log('匹配到的热点数量：', $("#1,#2").length)

如果输出为0，说明绑定时机太早，需要把点击事件绑定逻辑放在3D视图渲染完成的回调里执行。

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