Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.07.2017, 17:25
Новичок на форуме
Отправить личное сообщение для sonya19 Посмотреть профиль Найти все сообщения от sonya19
 
Регистрация: 22.07.2017
Сообщений: 4

Отследить появление button в DOM
Добрый день!
Помогите новенькой в 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.
Ответить с цитированием
  #2 (permalink)  
Старый 22.07.2017, 17:29
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Либо делегировать обработку события, либо обработчик события определять кнопке после ее помещения на страницу, в ajax.
Ответить с цитированием
  #3 (permalink)  
Старый 22.07.2017, 17:32
Новичок на форуме
Отправить личное сообщение для sonya19 Посмотреть профиль Найти все сообщения от sonya19
 
Регистрация: 22.07.2017
Сообщений: 4

Сообщение от laimas Посмотреть сообщение
Либо делегировать обработку события, либо обработчик события определять кнопке после ее помещения на страницу, в ajax.
а средствами js, а еще лучше jquery нельзя отслеживать появление элементов?
Я пробовала live и on, все равно кнопка не отслеживается
Ответить с цитированием
  #4 (permalink)  
Старый 22.07.2017, 18:02
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от sonya19
а средствами 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() {
          //код
    })
}
Ответить с цитированием
  #5 (permalink)  
Старый 23.07.2017, 12:00
Новичок на форуме
Отправить личное сообщение для sonya19 Посмотреть профиль Найти все сообщения от sonya19
 
Регистрация: 22.07.2017
Сообщений: 4

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

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

например: $('#button1').on("change", function(){}
Ответить с цитированием
  #6 (permalink)  
Старый 23.07.2017, 12:26
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от sonya19
в .find я указываю просто тип элемента? например: .find("button") ?
Указываете то, что нужно вам, речь шла о кнопке, поэтому я и написал button, а вот что касаемо id, то тут сказать сложно. Ранее говорилось, что якобы есть кнопка на странице и ей устанавливается обработчик. А вот с динамически добавленной кнопкой проблема, если таких кнопок может быть на странице несколько то ни в коем случае они не должны иметь одно и тоже ID.

Сообщение от sonya19
например: $('#button1').on("change", function(){}
Зачем же? Во-первых у поля input type="button" события change не может быть уже просто по логике, нечему в ней изменятся, это кнопка, по ней можно щелкнуть. Во-вторых, это уже и есть установка обработчика:

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

Последний раз редактировалось laimas, 23.07.2017 в 13:05.
Ответить с цитированием
  #7 (permalink)  
Старый 23.07.2017, 13:00
Новичок на форуме
Отправить личное сообщение для sonya19 Посмотреть профиль Найти все сообщения от sonya19
 
Регистрация: 22.07.2017
Сообщений: 4

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как отследить появление элемента на странице? рони Общие вопросы Javascript 18 23.06.2020 09:18
Появление элемента в DOM aktep Элементы интерфейса 15 13.02.2016 13:17
элемент внутри кнопки button FanAizu (X)HTML/CSS 2 15.07.2014 20:44
инициализация плагинов до вставки html-я в DOM FanAizu jQuery 3 19.01.2014 01:16
как отследить появление элемента на чужой странице Udik Events/DOM/Window 3 17.08.2013 06:01