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

Question

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

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

该代码为my_div中具有特定类的所有按钮添加了一个处理程序。我如何只为第一个按钮做同样的事情？

更新： 我在页面上动态删除并添加按钮。 之前删除此代码效果很好，这意味着它仅适用于第一个按钮，而不适用于任何其他按钮，这就是我想要的：

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

然而， 后再次添加第一个按钮会再次动态，但它不再有效，但下面会有一个，但它适用于所有按钮，这不是我想要的：

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

Answer 1

使用:first-child selector

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

工作DEMO

编辑：

更新FIDDLE包含动态加载元素的用例

Answer 2

jQuery has a First-Child selector的功能与您可以使用的CSS3完全相同。这将选择＆＃34; .some_class＆＃34;的第一个实例。位于#my_div内。

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

Answer 3

尝试这个带有索引的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');
}

Answer 4

为您希望拥有处理程序的特定按钮创建一个唯一ID，并使用它来区分您的按钮。

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

Answer 5

你有没有尝试过：第一个孩子呢？

试，

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

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

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