새로 만든 DOM 요소에서 jQuery UI draggable이 작동하지 않습니다.

Question

jQuery UI를 사용하여 드래그 할 수있는 일부 DOM 요소가 있습니다. 모든 것이 잘 작동하지만 jQuery를 사용하여 일부 요소를 만들면 드래그 할 수 없습니다. 예 :

$('div.draggable').draggable(); //Existing element , it works :) 
$('p.draggable').draggable() ; //Newly created paragraph with same class name, it doesnt work at all :(

미리 감사드립니다.

나는이를 시도하고있다 :

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('body').append('<p class="draggable">Newly Created Paragraph</p>'); 
     $('p.draggable').draggable(); **//This is not working** 
    }); 
</script> 

그러나 어떻게 든이

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('body').append('<p class="draggable">Newly Created Paragraph</p>') 
       .find('p.draggable').draggable(); **This is working** 

    }); 
</script> 

Answer 1

당신은 새로 만든 요소가 DOM에 삽입 한 후() 드래그 호출 할 필요가 노력하고 있습니다.

이유는 첫 번째 코드 줄이 기존 요소와 일치하기 때문입니다. 새로 만든 요소는 첫 번째 줄에서 선택되지 않습니다.

Answer 2

사실 드래그 가능한 문제가있는 것 같습니다. 일부 htmlTag를 추가 한 다음 찾아서 드래그 할 수있게하면 인식하지 못합니다. createElement을 사용하여 새 요소를 만든 다음 추가하십시오. 그것이 내가이 문제를 가지고

var newEle = document.createElement('p'); 
$(newEle).attr("class","draggable").draggable(); 
$('body').append($(newEle)); 

또는

var newEle = document.createElement('p'); 
$(newEle).attr("class","draggable"); 
$('body').append($(newEle)); 
$('p.draggable').draggable(); 

Answer 3

작동 희망하지만,이를 읽은 후 나는 그것을 해결할 수 있습니다. 나는 그것 오랜만 알고

$(".in-browser").each(function(){ 
     $(this).dblclick(function(){ 
      var browseIn = $(this).data("href"); 
      var browserHTML = '<div class="browser draggable">\ 
     <ul class="browser-buttons">\ 
      <li>_ \ 
      <li># \ 
      <li>x \ 
     </ul>\ 
     <div class="browser-win-container">\ 
     <div class="addressbar"></div>\ 
     <iframe class="opening-window" src="'+browseIn+'"></iframe>\ 
    </div>\ 
    </div>'; 
      $("body").append(browserHTML); 
      $(".draggable").draggable(); //look at here 
     }); 
    }); 

Answer 4

하지만,이 문제는 최근에 나도 도청 : 당신의 새로운 요소를 구축 한 후 다시 드래그() 메소드를 호출 할 필요가 있으므로,이 내 코드입니다. 다른 사람이 언급했듯이 새로 작성한 항목에 .draggable()을 다시 실행해야하지만 .draggable()에 특정 옵션을 정의한 경우에는 작동하지 않습니다. 또한 작동하지 않은 기능은 $().draggable()을 함수에 넣은 다음 새 요소를 만든 후 함수를 호출하는 것입니다 (이 트릭은 droppables 재설정과 함께 작동합니다 - 그림 참조).

어쨌든, long story short -> 함수에 $().draggable() 설정을 넣은 다음 새로운 요소 DID를 작성한 후에 함수를 호출하지만 기능을 해제 한 후 document ready 함수를 가져와야했습니다. , 효과가있었습니다.

이 함수를 여러 번 호출 할 수 있으며 생성 된 모든 요소 이후에 계속 작동합니다. 그것이 그 때 document.ready 계산서에서 그것의 1 발 거래 인 경우에 ...

희망하는 희망. , 재 작성 코드

$('body').on('click', '.add-new-table', function() { 
$(".canvas").prepend('<div class="ui-widget-content draggable"><p>Drag me</p></div>'); 
$(function(){ 
    $(".draggable").draggable({ 
    containment: "parent" 
    }); 
}); 
}); 

Answer 5

당신은 당신이 이벤트 액션을 호출 드래그() 함수를 매번 호출해야

이제 작동합니다.

Answer 6

당신은 새로 생성 된 개체의 인스턴스에 드래그 적용해야 :

<script type="text/javascript"> 
$(document).ready(function(){ 
    var newElement = '<p class="draggable">Newly Created Paragraph</p>'; 
    $('body').append(newElement); 
    newElement.draggable(); **//This is working** 
});