Событие щелчка на клонированном элементе не работает, несмотря на метод $ (document) .on (click,, .foo, function) - PullRequest
Новая
       103

Событие щелчка на клонированном элементе не работает, несмотря на метод $ (document) .on (click,, .foo, function)

0 голосов
/ 02 мая 2020

У меня есть следующий div 

<div class = 'step'></div>

, присоединенный к событию click(), которое добавляет класс к .step, если у него его нет, и наоборот: 

$(".step").click(function(){
  if ($(this).hasClass('stepLit')) {
    $(this).removeClass('stepLit')
  } else {
    $(this).addClass('stepLit')
  }
})

Я клонирую div следующим образом: 

var step = $(".step").clone()

и добавляю его: 

$(step).appendTo('#foo')

Теперь, если я хочу прикрепить событие click ко всем существующим и динамически генерируемым HTML элементы с классом '.step', я должен использовать метод .on таким образом: 

$(document).on('click', '.step', function(){...})

, но событие (добавление / удаление освещенного класса) по-прежнему не происходит, когда я щелкаю свой клонированный + добавленный элемент , Имеет ли это какое-то отношение к тому факту, что ключевое слово this в моей функции click теперь относится не к div, по которому щелкают, а к документу?

1 Ответ

0 голосов
/ 02 мая 2020

Я создал демо для вас, посмотрите, работает ли это для вас. 

$(document).on('click', '.step', function(){
  if ($(this).hasClass('stepLit')) {
    $(this).removeClass('stepLit');
    $(this).find('span').text('step');
  } else {
    $(this).addClass('stepLit');
    $(this).find('span').text('stepLit');
  }
});



$(document).on('click', '.clone', function(){
  console.clear();
  let $step = $(".step:first").clone()
  console.log($step);
  $step.appendTo("#foo");
});
div{
  height: 50px;
}

.step{
  background: aquamarine;
}

.stepLit{
  background: bisque;
}

#foo{
  background: burlywood;
  margin: 5px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='step'>
  <span>step</span><br>
  <button class="clone">Clone</button>
</div>

<div id="foo"></div>
...