События js, динамические элементы

#javascript #jquery

Перемещаю div при помощи js в разные места (переменная > remove() > append()), есть
клик события на внутренние элементы. При изменении положения дива клик перестает работать,
внутренние элементы при этом не меняют класс, на который повешено событие, — как это
исправить?

Пример на jsFF

$(".remove").click(function (){
    var removeBox = $(".holder");
    $(".holder").remove();
    $(".parent2").append(removeBox);
});


$(".holder > div").click(function () {
    console.log("Клик");
});

    

Ответы

Ответ 1

Согласно справке по функции .remove():


  all bound events and jQuery data associated with the elements are removed. To remove
the elements without removing data and events, use .detach() instead.'





  все привязанные обработчики и данные ассоциированные с элементами будут удалены.
Для удаления элементов без удаления данных и обработчиков используйте .detach()






$(".remove").click(function() {
  var removeBox = $(".holder").detach();
  $(".parent2").append(removeBox);
});


$(".holder > div").click(function() {
  console.log("Клик");
});


  

    

      1111
    
  








Ответ 2

удалив элемент, вы так же удаляете его событие. Повесьте событие на родителя через
on, родитель у вас не удаляется и событие для элементов внутри него будут работать.



$(".remove").click(function (){
  var removeBox = $(".holder");
  $(".holder").remove();
  $(".parent2").append(removeBox);
});


$(".parent, .parent2").on('click', ".holder > div", function () {
  console.log("Клик");
});


  

    

      1111