Добавление обработчика только для первой кнопки

Question

На странице есть div и содержит несколько кнопок с тем же классом, но без идентификатора. Я хотел бы иметь возможность добавить обработчик для него, но только для первой кнопки:

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

код добавляет обработчик для всех кнопок с в my_div с определенным классом. Как сделать то же самое только для первой кнопки?

UPDATE: Я удаляю и динамически добавляю кнопки на странице. Перед удаления этого кода работает хорошо, то есть он работает только для первой кнопки, а не для каких-либо других кнопок, и это то, что я хочу:

$(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

EDIT:

Обновлено FIDDLE имеет UseCase динамически загружаемого элемента

Answer 2

Создать уникальный идентификатор для конкретной кнопки вы хотите иметь обработчик и использовать его чтобы отличить вашу кнопку.

Если вы используете класс ставить обработчик, все элементы с этим классом будут иметь обработчик OnClick (до тех пор, как это соответствует вашему запросу, который является «#my_div .some_class»)

Answer 3

Вы пробовали: первые ребенок еще?

попробовать,

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

Но первый, пожалуйста, проверьте в консоли, если вы можете обнаружить, что первый ребенок, используя этот селектор или нет?

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

Answer 4

jQuery has a First-Child selector, который работает в значительной степени так же, как CSS3 коллеги, которые вы можете использовать. Это выберет первый экземпляр «.some_class», расположенный в пределах #my_div.

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

Answer 5

Тест 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'); 
}