如何用jQuery获取点击元素文本？点击弹窗异常问题求助

嘿，我来帮你搞定这个点击弹窗的问题！你遇到的第一次点击弹窗为空、之后弹窗次数越来越多的情况，核心原因是事件绑定嵌套导致的重复绑定，咱们来一步步拆解并解决：

为什么你的代码会出问题？ #

你把h3的点击事件绑定写在了.results的点击回调里，这就导致：

• 第一次点击.results（或者直接点击里面的h3）时，才会给h3绑定点击事件，但这次点击已经触发完毕，所以弹窗不会弹出；
• 第二次点击时，.results的点击回调又会给h3多绑一次事件，此时h3上有2个点击事件处理器，所以弹窗会弹2次；
• 后续每点击一次，h3上的事件处理器就会多一个，弹窗次数自然越来越多。

两种靠谱的解决办法 #

1. 直接给h3绑定事件（非动态元素推荐） #

把事件绑定拆开，直接给目标元素h3绑定点击事件，避免嵌套绑定：

// 直接绑定h3的点击事件
jQuery(".results h3").click(function(event) {
  event.preventDefault();
  // 可选：如果不想触发父元素.results的点击事件，加上这行
  // event.stopPropagation();
  
  var text = jQuery(this).text();
  console.log(text.trim());
  alert(text.trim());
});

// 如果.results本身需要点击逻辑，单独绑定
jQuery(".results").click(function(event) {
  event.preventDefault();
  // 这里写.results点击需要执行的其他代码
});

2. 使用事件委托（动态生成元素推荐） #

如果.results是页面加载后动态生成的，用事件委托绑定到父元素（比如document），这样只会绑定一次事件，不会重复：

// 事件委托绑定h3的点击
jQuery(document).on('click', '.results h3', function(event) {
  event.preventDefault();
  
  var text = jQuery(this).text();
  console.log(text.trim());
  alert(text.trim());
});

// 若需要处理.results的点击，注意排除h3的情况
jQuery(document).on('click', '.results', function(event) {
  if (!jQuery(event.target).is('h3')) {
    event.preventDefault();
    // 这里写.results点击的其他逻辑
  }
});

这样修改后，不管点击多少次，都只会触发一次弹窗，第一次点击就能正常获取文本啦～

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