Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Не срабатывает событие click на динамически добавленный класс (https://javascript.ru/forum/jquery/59565-ne-srabatyvaet-sobytie-click-na-dinamicheski-dobavlennyjj-klass.html)

spo 16.11.2015 22:03

Не срабатывает событие click на динамически добавленный класс
 
Подскажите почему не работает событие click по кнопке btn-2 после клика по btn?
http://jsfiddle.net/tv0pzuw0/10/

рони 16.11.2015 22:08

spo,
потому что элемента .hello div.btn-2 ещё нет, а раз нет то и клик не назначить, назначайте тому что есть.

Mess4me 16.11.2015 22:17

spo,
здесь ищите проблему .hello div.btn-2 !

spo 16.11.2015 22:31

Цитата:

Сообщение от рони (Сообщение 396408)
spo,
потому что элемента .hello div.btn-2 ещё нет, а раз нет то и клик не назначить, назначайте тому что есть.

Так ведь on('click') же использую

И что значит нет? После клика на btn еще как есть.

рони 16.11.2015 22:34

Цитата:

Сообщение от spo
И что значит нет?

то и значит что нет
Цитата:

Сообщение от spo
Так ведь on('click')

Цитата:

Сообщение от рони
назначайте тому что есть.

подсказка body или что у вас там ближе постоянное.

spo 16.11.2015 22:36

Цитата:

Сообщение от рони (Сообщение 396408)
spo,
потому что элемента .hello div.btn-2 ещё нет, а раз нет то и клик не назначить, назначайте тому что есть.

Цитата:

Сообщение от рони (Сообщение 396416)
то и значит что нет
подсказка body или что у вас там ближе постоянное.

А можете в двух словах объяснить? Потому что после клика на btn header получает класс .hello. Соответственно к btn-2 можно обратиться по .hello .btn-2

рони 16.11.2015 22:39

Цитата:

Сообщение от spo
после клика на btn

есть но вы же назначаите когда этого класса нет!!!
значит и элемента .hello div.btn-2 нет!!!

рони 16.11.2015 22:43

spo,
строку 18 надо исправить, как я подсказал выше ... если трудно перечитайте документацию на on и про делегирование
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
$('div.btn').click(function () {
	$('header').addClass('hello');
});
alert($('.hello div.btn-2').length)
$('.hello div.btn-2').on('click', function () {
	$('header').removeClass('hello');
});
});


  </script>
</head>

<body>
<header>
    <div class="btn">btn</div>
    <div class="btn-2">btn-2</div>
</header>
</body>

</html>

Barbos 16.11.2015 22:44

$('header').on('click', '.btn-2', function () {
$('header').removeClass('hello');
});

spo 16.11.2015 22:44

Цитата:

Сообщение от рони (Сообщение 396419)
есть но вы же назначаите когда этого класса нет!!!
значит и элемента .hello div.btn-2 нет!!!

Большое спасибо. Сработало вот так:
$('body').on('click', '.hello div.btn-2', function () {...});


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