Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Недоступен элемент после append (https://javascript.ru/forum/dom-window/40101-nedostupen-ehlement-posle-append.html)

Fabio 23.07.2013 21:01

Недоступен элемент после append
 
Здравствуйте! Такая ситуация, с помощью javascript добавляю на страницу элемент div с определенным классом, при нажатии на который должно выскакивать alert сообщение. Ситуация такая, если элемент с данным классом загружается со страницой, то при нажатии на него сообщение показывается, а если элемент добавлен с помощью append то вывод сообщения не работает. Подскажите, в чем может быть причина.
$(document).ready(function(){
   $('button').click(function(){
         alert('ok');
});
   $('add').click(function(){
          $('container').append('<div class="button"></div>');
});
})

AfraidAlex 23.07.2013 21:07

ты сначала вешаешь обработчик, а потом добавляешь элемент. В JS тоже все последовательно.

$(document).ready(function(){
   

   $('add').click(function(){
          $('container').append('<div class="button"></div>');
          $('button').click(function(){
                   alert('ok');
                   });
          })
});

рони 23.07.2013 21:34

Fabio,
ставьте клик с помощью on потом добавляйте новые элементы когда захотите и для классов точку незабывайте

Fabio 23.07.2013 21:43

Цитата:

Сообщение от AfraidAlex (Сообщение 263863)
ты сначала вешаешь обработчик, а потом добавляешь элемент. В JS тоже все последовательно.

$(document).ready(function(){
   

   $('add').click(function(){
          $('container').append('<div class="button"></div>');
          $('button').click(function(){
                   alert('ok');
                   });
          })
});

Спасибо работает

danik.js 24.07.2013 01:00

AfraidAlex, если два раза нажать add то на первую кнопку будет навешано два обработчика сразу, и так далее кри каждом клике. Как вариант - $('button:last')

ruslan_mart 24.07.2013 17:59

$(function(){
   $('.button').live('click', function(){
      alert('ok');
   });
   $('add').click(function(){
      $('container').append('<div class="button"></div>');
   });
})

рони 24.07.2013 18:14

Цитата:

Сообщение от Ruslan_xDD
live

а почему не on?

ruslan_mart 25.07.2013 04:01

рони, можно и on, но я предпочитаю live, так как особой разницы не вижу. Или есть большие сходства?

danik.js 25.07.2013 04:26

Цитата:

Сообщение от Ruslan_xDD
но я предпочитаю live, так как особой разницы не вижу

Во, первых, live обозначен как deprecated. А это значит что однажды тебе придется его все-же заменить на on.
Во-вторых, через on можно назначить элемент-обработчик, тогда как в live жестко вшит document. В большинстве случаев это излишне и нужен более специфический элемент.
В-третьих, при навешивании live() делается лишняя работа по поиску элементов, совпадающих с селектором.

ruslan_mart 25.07.2013 15:12

danik.js, теперь буду знать :thanks:


Часовой пояс GMT +3, время: 09:01.