核心原因分析 #

你遇到的“点击两次才触发弹窗”的问题，本质是事件绑定逻辑嵌套错误：

• 第一次点击目标元素时，实际执行的是nowClicked()函数本身——这个函数并没有直接触发弹窗，而是完成了一件事：给所有.object元素绑定了一个新的click事件处理函数。
• 等到第二次点击时，才会触发刚刚绑定的那个click事件处理函数，弹窗逻辑才会执行。

另外你的代码还有个小bug：事件处理函数里用到了e参数，但这个参数没有被声明，运行时会抛出ReferenceError，得记得补上。

修复方案 #

根据你的需求，有两种常见的修复方式：

方式1：直接通过onclick执行逻辑（适合需要手动触发绑定的场景） #

如果你的设计就是要通过元素的onclick属性触发逻辑，那完全不需要在nowClicked里再绑定一次click事件，直接处理当前点击的元素即可：

function nowClicked(e) {
  // 阻止事件冒泡，注意要接收e参数
  e.stopImmediatePropagation();
  
  // 移除所有.object的clicked类
  $('.object').removeClass("clicked");
  
  // 获取当前点击元素的id（用原生this更高效）
  var targetId = this.id;
  alert(targetId);
  
  // 给当前点击元素添加clicked类
  $(this).addClass("clicked");
}

对应的HTML要记得传递事件参数：

<div class="object" id="target1" onclick="nowClicked(event)">点击我</div>

方式2：页面就绪时自动绑定事件（推荐，更符合jQuery最佳实践） #

如果你的.object元素是页面加载时就存在的，推荐直接在页面就绪时给所有元素绑定点击事件，不需要依赖onclick属性：

$(document).ready(function() {
  $('.object').click(function(e) {
    e.stopImmediatePropagation();
    
    $('.object').removeClass("clicked");
    var targetId = $(this).attr("id");
    alert(targetId);
    $(this).addClass("clicked");
  });
});

这种情况下，HTML只需要保留元素的class和id即可：

<div class="object" id="target1">点击我</div>

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