Javascript 仅为第一个按钮添加处理程序

页面上有一个div，其中包含一些具有相同类但没有id的按钮。我希望能够为其添加处理程序，但仅为第一个按钮添加处理程序：

  $(document).on("click", "#my_div .some_class", function() {
    alert("yes");
  });

该代码向my_div中具有特定类的所有按钮添加一个处理程序。如何仅对第一个按钮执行相同的操作

更新： 我在页面上动态删除和添加按钮Before删除此代码效果很好，这意味着它只对第一个按钮有效，对任何其他按钮无效，这就是我想要的：

$(document).on("click", "#my_div .some_class:eq(0)", function() {
  alert("yes");
 });

$(document).on("click", "#my_div .some_class", function() {
  alert("yes");
});

但是，在删除和添加第一个按钮后，它不再动态工作，但下面的这个按钮可以，尽管它适用于所有按钮，这不是我想要的：

$(document).on("click", "#my_div .some_class:eq(0)", function() {
  alert("yes");
 });

$(document).on("click", "#my_div .some_class", function() {
  alert("yes");
});

使用

工作

编辑：

更新了动态加载元素的用例

使用

工作

编辑：

---

更新了动态加载元素的用例

为您想要拥有处理程序的特定按钮创建一个唯一ID，并使用该ID来区分您的按钮

---

如果使用类来放置处理程序，则该类的所有元素都将具有onclick处理程序（只要它适合您的查询，即“#my_div.some_class”）

为您想要具有该处理程序的特定按钮创建一个唯一ID，并使用该ID来区分您的按钮

---

如果您使用一个类来放置处理程序，那么该类的所有元素都将具有onclick处理程序（只要它适合您的查询，即“#my_div.some_class”）

您尝试过：第一个孩子了吗

试试

但首先，请检查您的控制台是否可以找到第一个使用此选择器的孩子

  $("#my_div .some_class:first-child")

---

你试过了吗：第一个孩子

试试看

但首先，请检查您的控制台是否可以找到第一个使用此选择器的孩子

  $("#my_div .some_class:first-child")

它的工作原理与您可以使用的CSS3类似。这将选择位于

#my_div

中的“

.some_class

”的第一个实例

$(document).on("click", "#my_div .some_class:first-child", function() {
    alert("yes");
});

它的工作原理与您可以使用的CSS3类似。这将选择位于

#my_div

中的“

.some_class

”的第一个实例

$(document).on("click", "#my_div .some_class:first-child", function() {
    alert("yes");
});

---

尝试此

eq

选择器，它获取索引：

$(document).on("click", "#my_div .some_class:eq(0)", function() {
    alert("yes");
});

还有：

gt

：选择大于给定索引的倍数

lt

：选择比给定索引小的多个索引

更新：

$(document).delegate("click", "#my_div .some_class:eq(0)", function() {
    alert("yes");
});

检查显示：

if($("selector").is(":hidden")) {
  //
}

还有：

：可见，用于检查元素是否显示

附加到第一个可见元素

$(document).delegate("click", "#my_div .some_class:visible:eq(0)", function() {
   alert('yes');
}

---

尝试此

eq

选择器，它获取索引：

$(document).on("click", "#my_div .some_class:eq(0)", function() {
    alert("yes");
});

还有：

gt

：选择大于给定索引的倍数

lt

：选择比给定索引小的多个索引

更新：

$(document).delegate("click", "#my_div .some_class:eq(0)", function() {
    alert("yes");
});

检查显示：

if($("selector").is(":hidden")) {
  //
}

还有：

：可见，用于检查元素是否显示

附加到第一个可见元素

$(document).delegate("click", "#my_div .some_class:visible:eq(0)", function() {
   alert('yes');
}

---

但是，当我删除并动态添加这个按钮时，它就不再工作了。我想知道为什么。它有类名吗？此外，请确保第一个孩子确实是（可能是您正在将其添加到末尾。）-如果您要添加到末尾，则第二个按钮现在是domin事实中的第一个按钮，“：first child”根本不起作用，只有：eq（0）起作用，而且是第一次（删除之前）。检查此更新的小提琴：它应该可以正常工作。问题是，通过执行事件委派，

$（document）。在（..）

上，您正在适应将动态元素应用于侦听器的用例。但是，当我删除并动态添加此按钮时，它不再起作用。我想知道为什么。它有类名吗？此外，请确保第一个孩子确实是（可能是您正在将其添加到末尾。）-如果您要添加到末尾，则第二个按钮现在是domin事实中的第一个按钮，“：first child”根本不起作用，只有：eq（0）起作用，而且是第一次（删除之前）。检查此更新的小提琴：它应该可以正常工作。问题是，通过执行事件委托，

$（document）。在（..）

上，您正在适应将动态元素应用于侦听器的用例。谢谢，问题是关于另一件事。您能告诉我如何添加此元素不具有“display:none”的条件吗？换句话说，“my_div”中的第一个元素是类。一些没有样式“display:none”的类。但是我如何将其应用于

$（document）。委托（“click”，“#my_div.some_class:eq（0）”，function（）{

？谢谢，问题是关于另一件事。你能告诉我如何添加此元素没有的条件吗“display:none”？换句话说，“my_div”中的第一个元素与类一起。一些没有样式“display:none”的类。但是我如何将其应用于

$（文档）。委托（“单击”，“my_div.some_class:eq（0）”，function（）{

？