Jquery - getJSON에서 동적으로 추가 된 컨트롤 추가

Question

동적으로 추가 된 요소 (JSON 함수 내부)에 컨트롤을 할당하는 데 문제가 있습니다.

코드가 제대로 작동하지만 $ ('div.prnt')를 추가 할 때. append ("hello"); JSON 안에 $ ("div.text")를 할당하지 않습니다. draggable(); 그것에. JSON 함수를 사용하지 않고 $ ('div.prnt') 만 사용하고 있습니다. append ("hello"); 그것은 곧바로 작동합니다.

나는 드래그 가능한 컨트롤이 호출되기 전에 JSON 함수가 요소가 추가되는 것을 멈추고 있다고 생각합니다.

<style> 
    div.prnt div.test 
    { 
     border: 1px solid #000; 
     width: 200px; 
     height: 200px; 
    } 
</style> 
<script type="text/javascript"> 
    $(document).ready(function() 
    { 
     var serviceurl = "WebServices/BusinessCardStudio.svc/gettextobjects/3457/17/17/1064/709/600/399"; 

     $.getJSON 
     (
      serviceurl, 
      function (data) 
      { 
       $.each(data, function (i, item) 
       { 
        $('div.prnt').append("<div class='object text'>hello</div>"); 
       }); 
      } 
     ); 

     $("div.text").draggable(); 
    }); 
</script> 
<div class="prnt"> 
</div> 

누구든지이 문제를 해결할 방법을 알고 있습니까? 사전

Answer 1

는 아약스의 성공에 할

Answer 2

AJAX에서

덕분에 비동기입니다.

getJSON() 호출은 즉시 반환되며 서버가 응답하기 전에 draggable() 호출이 실행됩니다.

draggable() 호출을 콜백으로 옮겨야합니다.
이 때문에 콜백이 처음부터 존재합니다.

Answer 3

$("div.text").draggable();은 JSON 요청이 시작된 직후에 호출됩니다. 그런 다음 나중에 서버가 JSON으로 응답하고 전달한 함수를 실행합니다. 그래서 당신은 아직 존재하지 않는 드래그 가능한 것을 만들고 있습니다.

콜백 함수에 draggable 호출을 넣으면 좋을 것입니다. 아약스는

$.getJSON 
      (
       serviceurl, 
       function (data) 
       { 
        $.each(data, function (i, item) 
        { 
         $('div.prnt').append("<div class='object text'>hello</div>"); 
        }); 
       $("div.text").draggable(); 
       } 
      ); 


     }); 

을 완료 한 후에는 완료 확인 있도록