on.click需二次点击才触发？Ajax动态元素的单次点击弹窗问题求助

先给你捋清楚当前代码的问题根源：你现在的逻辑是，第一次点击动态加载的span时，触发的是div上的事件委托回调——这个回调的作用仅仅是给当前的span绑定了一个新的click事件，并没有直接执行弹出alert的操作；只有第二次点击时，才会触发刚绑定的这个click事件，所以才需要点两次才能弹出提示。

接下来是修正方案，我们会保留show_me函数的复用性（支持传入选择器参数），同时让动态元素点击一次就触发alert：

修正后的代码示例 #

<!-- 静态存在的容器，内部span通过Ajax加载 -->
<div></div>

// 保留选择器参数，同时支持两种使用场景：绑定静态元素、供事件委托调用
function show_me(selector) {
  // 把弹出逻辑封装成独立的处理函数，方便复用
  const handleClick = function() {
    alert('showing');
  };

  // 如果传入了jQuery选择器，就给该元素绑定点击事件（用于静态元素）
  if (selector && selector instanceof jQuery) {
    selector.on('click', handleClick);
  }

  // 返回处理函数，供事件委托使用（处理动态加载的元素）
  return handleClick;
}

// 事件委托直接使用show_me返回的处理函数，点击即触发
$('div').on('click', 'span', show_me());

// 其他地方复用示例：给静态元素绑定点击事件
// show_me($('#static-span'));

逻辑说明 #

1. 我们把弹出alert的逻辑封装成handleClick函数，这样不管是静态元素还是动态元素，都能复用这段逻辑；
2. show_me函数现在有两个作用：
   • 如果传入了jQuery选择器，就给这个元素绑定点击事件（适合静态元素）；
   • 返回handleClick函数，供事件委托直接调用（适合动态元素）；
3. 事件委托的回调直接用show_me()返回的处理函数，所以第一次点击动态span时，就会直接执行弹出逻辑，不需要第二次点击。

这样既满足了show_me函数的复用需求，又解决了动态元素点击两次才触发的问题。

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