2012-02-21 2 views
4

제 코드에 div가 있고 복제 할 때 이벤트가 발생하지 않습니다. 다음은 코드입니다.복제 후 jQuery 트리거가 실행되지 않습니다.

<div id="draggable" onclick="alert(1);" class="ui-widget-content drag"> 
    <p>Drag me to my target</p> 
</div> 
<div id="here"> 
</div> 

<script type="text/javascript"> 
    $("#draggable").clone().removeAttr("id").attr('id', 'draggable2').appendTo("#here"); 
    $("#draggable2").trigger('onclick'); 
</script> 

다음 복제 된 요소를 클릭하면 normaly 이벤트가 발생합니다. 내가 잘 또한 작동 원래의 요소 트리거 수 있도록 스크립트를 변경하는 경우

는 :

<script type="text/javascript"> 
    $("#draggable").clone().removeAttr("id").attr('id', 'draggable2').appendTo("#here"); 
    $("#draggable").trigger('onclick'); 
</script> 

을 또한 바인딩 기능이 잘 작동 :

<script type="text/javascript"> 
    $("#draggable").clone().removeAttr("id").attr('id', 'draggable2').appendTo("#here"); 
    $("#draggable2").bind('click', function() { alert('2'); }); 
    $("#draggable2").trigger('click'); 
</script> 

어느 하나를 해고하는 방법에 대한 아이디어를 가지고 복제 직후 복제 된 요소의 '표준'onclick.

답변

20

요소 및 해당 이벤트를 복제하려면 "true"를 첫 번째 인수로 전달해야합니다. 그 아이의 이벤트를 전달하려면, 당신은 또한 두 번째 argument.`

$myClone = $('#element').clone(true, true); 

http://api.jquery.com/clone/

0

그것은 처음부터 깨지기 쉬운 접근 방법으로 "true"로 통과해야합니다. 당신은 복제본을 만드는 함수를 가지고 있고, 복제 후에 실행하는 함수를 가지고 있습니다. 왜 그 기능을 복제 후에 발생시키는 것일까? 클릭 바인딩에서 호출하거나 복제 기능에서 직접 호출 할 수있는 재사용 가능한 함수를 만듭니다.

꼭 필요한 경우 $(selector).click()을 사용하면 클릭 이벤트가 발생합니다.

[편집 : 나는 Fauntleroy의 응답에 따라 'true'를 전달할 필요성을 인식하지 못 했으므로 조언 없이는 내 접근 방식도 작동하지 않습니다. 그러나 "이것은 아마도 나쁜 접근이다"라는 일반적인 조언은 의미한다.

관련 문제