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

275

18 мая 2017, 11:43

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

Пример на jsFF

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

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

Answer 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("Клик"); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="parent"> 
  <div class="holder"> 
    <div class="elem1"> 
      1111 
    </div> 
  </div> 
 
</div> 
<div class="parent2"> 
 
</div> 
<button class="remove">переместить</button>

Answer 2

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="parent"> 
  <div class="holder"> 
    <div class="elem1"> 
      1111 
    </div> 
  </div> 
   
</div> 
<div class="parent2"> 
   
</div> 
<button class="remove">переместить</button>