如何选择动态生成类或HTML静态类？jQuery写法失效求解决方案

嘿，我来帮你理清楚这个问题！你之前的两种写法其实都没达到“同时选中.wrapper和.surround作为事件委托容器”的目的，先说说问题出在哪：

• 第一种写法$('.wrapper' || '.surround')：这里的逻辑或||是JavaScript的运算符，它会先判断.wrapper这个字符串是否为“真值”——显然非空字符串都是真值，所以这个表达式最终只会返回.wrapper，相当于只选了.wrapper这一个容器，完全忽略了.surround。
• 第二种写法$('.wrapper', '.surround')：jQuery的这个语法是“在.surround的上下文里查找.wrapper元素”，而不是同时选中两个容器，所以如果.surround里没有.wrapper，这个选择器就找不到任何元素，自然绑定无效。

接下来给你两种可行的解决方案，根据你的实际场景选：

方案1：同时选中两个静态/动态父元素（父元素至少有一个存在于初始DOM） #

如果.wrapper和.surround至少有一个是页面加载时就存在的（或者后续生成后能被选中），直接用逗号分隔多个选择器，把两个容器都选出来，再绑定事件委托：

$('.wrapper, .surround').on('click', '.bet-button', function() {
  // 你的点击逻辑
  console.log('Bet button clicked!');
});

逗号在jQuery选择器里就是“或”的意思，这样就能同时给两个容器绑定事件委托，不管.bet-button是静态还是动态生成的，只要它在这两个容器里，点击事件都会被触发。

方案2：绑定到上层静态元素（应对父元素也动态生成的情况） #

如果.wrapper和.surround本身都是动态生成的（页面加载时不存在），那就要把事件委托绑定到页面加载时就存在的上层元素（比如最靠近它们的静态父容器，尽量别直接用document，会影响性能），同时把目标元素的完整选择器写出来：

$('body').on('click', '.wrapper .bet-button, .surround .bet-button', function() {
  // 你的点击逻辑
  console.log('Bet button clicked!');
});

这种写法的好处是，不管父元素什么时候生成，只要.bet-button符合.wrapper .bet-button或.surround .bet-button的选择器，点击事件就能被捕获到。

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