jQuery - 랩 후 이벤트를 발생시키지 않는 요소

Question

jQuery를 사용하여 div를 동적으로 생성하고이를 사용하여 (jQuery.wrap() 메소드를 사용하여) 다른 요소를 래핑하고 일부 이벤트를 래퍼에 바인딩하면 트리거되지 않습니다. 왜?

이 바이올린을 참조하십시오 -

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

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


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

http://jsfiddle.net/tqzzdu21/ 만 위임 방법으로 바인더 제본 이벤트 리스너가 트리거 얻을,하지만 나는 그것이 요소 인스턴스에 바로 바인더 제본 이벤트를 실행하지 않는 이유가 표시되지 않습니다.

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 작동합니다 $() factory 함수에 전달되어 DOM 구조를 지정합니다. 이 구조는 여러 수준으로 중첩 될 수 있지만 중첩 요소 중 하나만 이어야합니다. 이 구조체의 복사본은 일치하는 요소 집합의 각 요소에 대해 으로 묶입니다.이 메서드 은 체인 용도로 원래 요소 집합을 반환합니다.