jQuery - элемент не запускает события после обертывания

Question

Когда я динамически создаю div, используя jQuery, используйте его для переноса другого элемента (используя метод jQuery.wrap()) и привязывайте некоторые события к оболочке, они не запускаются. Зачем?

Смотрите эту скрипку - http://jsfiddle.net/tqzzdu21/

var $wrapper = $('<div class="random-wrapper"></div>'); 

$('.random-element').wrap($wrapper); 


$wrapper.click(function(){ 
    alert('Sh*t happens ..'); 
}); 

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

Answer 1

Поскольку использование .wrap() создает клон переданного элемента до его фактического его обертывания. Таким образом, фактический элемент, используемый в обертке, не совпадает с принятым (в этом случае он не передается $wrapper).

Вместо если вы получаете доступ к родителю целевого элемента и связать это событие, оно должно работать

var $wrapper = $('<div class="random-wrapper"></div>'); 
 

 
$wrapper.click(function(){ 
 
    alert('before wrap - wrapper click'); 
 
}); 
 

 
$('.random-element').wrap($wrapper); 
 

 
$wrapper.click(function(){ 
 
    alert('wrapper click'); 
 
}); 
 

 
$('.random-element').parent().click(function(){ 
 
    alert('parent click'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="random-element">Lipsum</div>

.wrap()

В .wrap() может принимать любую строку или объект, который может быть передается в заводскую функцию $(), чтобы указать структуру DOM. Эта структура может быть вложенной на несколько уровней в глубину, но должна содержать только один из самых больших элементов. Копия этой структуры будет обернута вокруг каждого из элементов в наборе согласованных элементов. Этот метод возвращает исходный набор элементов для цепочки.