Отследить появление button в DOM

[sonya19]

Добрый день!
Помогите новенькой в JS.
Есть страница, в div которой я с помощью ajax из php добавляю button.
Мне нужно привязать событие к этой новой кнопке, второй день пытаюсь разобраться как это сделать, перерыла кучу сайтов, не получается!
Кнопка появляется, но я не могу событие привязать, даже определить ее.
Вот это приходит из php в index.html

echo '<input type="button" id="button1" value="Кнопка 1"/>

Далее к index.html привязываю файл js и из него пытаюсь поймать появление кнопки и привязать событие:

$('document').ready(function(){
$('#button1').on("change", function(){
	alert ("Нажата кнопка 1");
});

Ничего не происходит(((
Помогите пожалуйста, объясните что я не так делаю. И особо не ругайте за код, я только начала изучение JS.

[laimas]

Либо делегировать обработку события, либо обработчик события определять кнопке после ее помещения на страницу, в ajax.

[sonya19]

Либо делегировать обработку события, либо обработчик события определять кнопке после ее помещения на страницу, в ajax.

а средствами js, а еще лучше jquery нельзя отслеживать появление элементов?
Я пробовала live и on, все равно кнопка не отслеживается

[laimas]

а средствами js, а еще лучше jquery нельзя отслеживать появление элементов?

Можно, но в данном случае не нужно. Метод live устарел, а метод on, это как использовать:

a) $(element).on(event, function() {}) - установка обработчика элементу существующему на этот момент на странице, тоже самое, что и (element).event(function() {}).

б) $(parent).on(event, element, function() {}) - делегирование обработчика ближайшему родителю существующему на странице, то есть для динамически добавляемых элементов на страницу, чем и занимался live.

Способом а) можно воспользоваться и после динамического добавления элемента, в случае ajax, это в

success: function(data) {
    $(data).appendTo(объект цели).find(element).event(function() {
          //код
    })
}

[sonya19]

laimas,
спасибо, кажется начинаю понимать))
в  .find я указываю просто тип элемента? например: .find("button") ?

а далее в самой функции уже могу обращаться по id?

например: $('#button1').on("change", function(){}

[laimas]

в .find я указываю просто тип элемента? например: .find("button") ?

Указываете то, что нужно вам, речь шла о кнопке, поэтому я и написал button, а вот что касаемо id, то тут сказать сложно. Ранее говорилось, что якобы есть кнопка на странице и ей устанавливается обработчик. А вот с динамически добавленной кнопкой проблема, если таких кнопок может быть на странице несколько то ни в коем случае они не должны иметь одно и тоже ID.

например: $('#button1').on("change", function(){}

Зачем же? Во-первых у поля input type="button" события change не может быть уже просто по логике, нечему в ней изменятся, это кнопка, по ней можно щелкнуть. Во-вторых, это уже и есть установка обработчика:

success: function(data) {
    $(data) //полученное в JQ объект
    .appendTo(объект цели) //поместили во что-то на странице
    .find('[type=button]') //нашли в этом кнопку
    .click(function() { //установили ей обработчик
          //код
    })
}

[sonya19]

laimas, спасибо, очень доходчиво объяснили.
Все работает как надо!