如何使用jQuery选中指定class的第二个元素并绑定点击事件

你之前写法不生效的核心原因：$(".monkey").get(1)和$(".monkey")[1]返回的是原生DOM节点，不是jQuery实例对象，无法直接调用jQuery的事件绑定方法，所以绑定失败。

以下是几种可行的实现方案：

• 方案1：使用jQuery内置的:eq()选择器直接筛选第二个元素，索引从0开始计数，第二个元素对应索引1：

// 直接绑定点击事件
$(".monkey:eq(1)").on("click", function() {
  // 你的点击事件逻辑
})

• 方案2：调用jQuery集合的.eq()方法筛选，返回的依然是jQuery实例，可直接绑定事件，性能比方案1更优：

$(".monkey").eq(1).click(function() {
  // 你的点击事件逻辑
})

• 方案3：如果需要先拿到原生DOM再处理，可手动封装为jQuery对象后绑定：

const secondMonkeyDom = $(".monkey")[1];
$(secondMonkeyDom).on("click", function() {
  // 你的点击事件逻辑
})

为避免DOM未渲染完成就执行选择器导致取不到元素，建议把所有绑定逻辑放在DOM加载完成的回调中：

// 完整写法
$(document).ready(function() {
  $(".monkey").eq(1).click(function() {
    console.log("第二个monkey元素被点击");
  })
})

// 简写形式
$(function() {
  $(".monkey").eq(1).click(function() {
    console.log("第二个monkey元素被点击");
  })
})

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