JQuery выбор и фильтрация элементов внутри div

У меня проблема с выбором и фильтрованием элементов внутри div.

HTML:

<div id="wrapper">
    <input type="text" value="you can edit me">
    <input type="button" value="click me">
</div>

jQuery:

$("#wrapper").children().click(function() {
    alert("hi there");
});

Проблема заключается в том, что я получаю предупреждение каждый раз, когда я нажимаю что-либо внутри div.
Но мое требование - предупреждать только, когда пользователь нажимает кнопку.
Я знаю, что для фильтрации элементов в jQuery используется :button

Вот что я пробовал:

$("#wrapper").children(":button").click(function() {
    alert("hi there");
});

$("#wrapper").children().filter(":button").click(function() {
    alert("hi there");
});

Это не сработало

Кто-нибудь знает, как это сделать?

Ответ 1

$("#wrapper input[type=button]").click(function() {
    alert("hi there");
});

Ответ 2

использовать идентификатор для определенной кнопки -

<div id="wrapper">
    <input type="text" value="you can edit me">
    <input type="button" id='btnMyButton' value="click me">
    <input type="button" class='btnClass' id='btnMyButton2' value="click me 2">
<input type="button" class='btnClass' id='btnMyButton3' value="click me 3">
</div>

$('#btnMyButton').click(function(){
alert("hi there");
});

Для всех кнопок в div следуйте за ответом Джона. Используйте класс для некоторых кнопок -

$('.btnClass').click(function(){
    alert("all class");
});

btw, мне нравится ставить всю функцию jquery внутри готовой функции, например -

$(document).ready(function(){        

});

Ответ 3

Как насчет

$("#wrapper :button").click(function() { alert("I love Imogen Poots"); });

См. this

Ответ 4

Попробуйте следующее:

$("#wrapper > input[type=button]").click(function() {
    alert("hi there");
});