具有 id AND 类的 jQuery 选择器目标元素不起作用答案

【问题标题】：jQuery selector targeting element with id AND class does not work具有 id AND 类的 jQuery 选择器目标元素不起作用
【发布时间】：2013-10-21 05:03:53
【问题描述】：

我有以下事件处理函数：

jQuery(document).on('click', '#button .submitb', function(e){alert();});

jQuery 包含在 html 文档中。但是，如果我点击 <div id="button" class="submitb">Go!</div> 什么都不会发生。我什至没有在 chrome 控制台中收到错误。

【问题讨论】：

标签： javascript jquery html events callback

【解决方案1】：

.submitb 不是#button 的后代，使用 jquery 定位它只需使用 id `#button'

喜欢这个

jQuery(document).on('click', '#button', function(e){alert();});

如果您还想使用该类定位 div id，您只需移动空格即可。

喜欢这个

jQuery(document).on('click', '#button.submitb', function(e){alert();});

【讨论】：

谢谢，成功了！但为什么？如果我想匹配元素 id AND class，选择器应该是什么样子？
#button .submitb 是 ancestor descendant，#button > .submitb 是 parent > child
@user2595546 删除空格即可。 '#button.submitb'

【解决方案2】：

如果你想定位相同的元素，那么你不能在选择器之间有space，这意味着.submitb 后代 #button。

而且由于 元素有 ID，您实际上只需要 id 选择器：

jQuery(document).on('click', '#button', function(e){alert();});

编辑：

您不能有多个具有相同 ID 的按钮！！那么你应该只使用class。或者给他们不同的 ID 结尾，比如_0、_1 并以[id^=button] 为目标

【讨论】：

with space 是 descendant，而不是 child 选择器。
谢谢！问题是，我有多个#button，因为我将它用于 CSS 样式。但它在没有空间的情况下工作，谢谢:)！
@user2595546，检查我更新的答案。你不能有多个ID，这会给你带来麻烦
@Sergio 哦，不知道！嗯....那么，我应该将“按钮”作为一个类（用于样式）并“提交”一个 ID 吗？那么就不会有多个ID了？
@user2595546，将class 用于您想一起使用/定位的元素，将id 用于您想单独定位的某些特定（唯一命名）。希望对您有所帮助！