DOM에 추가 된 jQuery 새 요소가 작동하지 않습니다.

Question

여러 요소를 선택하고 드래그하는 스크립트가 있습니다. 그것은 잘 작동하지만 그 기능에 또 다른 새로운 요소를 추가하려면 DOM에 추가하면 작동하지 않습니다. 이 기능은 다음과 같습니다

$(function() { 
     var selected = $([]), offset = {top:0, left:0}; 
     $("#selectable1").selectable(); 

     $("#selectable1 span").draggable({ 
      start: function(ev, ui) { 
       $(this).is(".ui-selected") || $(".ui-selected").removeClass("ui-selected"); 

       $("span").removeClass("cica"); // ads class Cica to the draged/selected element 
       $(this).addClass("cica"); 

       selected = $(".ui-selected").each(function() { 
        var el = $(this); 
        el.data("offset", el.offset()); 
        $(this).text("Selected and dragging object(s)"); 
       }); 

       offset = $(this).offset(); 
      }, 
      drag: function(ev, ui) { 
       var dt = ui.position.top - offset.top, dl = ui.position.left - offset.left; 
       selected.not(this).each(function() { 

        var el = $(this), off = el.data("offset"); 
        el.css({top: off.top + dt, left: off.left + dl}); 

       }); 

      }, 
      stop: function(ev, ui){ 
       $(this).text("Drag has stopped"); 
      } 
     }); 
    }); 

새로운 요소는 다음과 같이 추가됩니다

$('<span class="drag">Xia</span>').appendTo('#selectable1'); 

나는 그것이 작동하지만 난 어디 스크립트를 추가하는 방법 모르는 만들기 위해 라이브 사용할 수 있다는 것을 알고. 클릭, 마우스 오버와 같은 이벤트에 추가하는 방법 만 알고 있습니다.

이 도움말에 대한 의견이 있으면 알려주십시오.

는

Answer 1

내가 할 줄 것은 "dragSetup"라는 만들어 낸 이벤트에 대한 이벤트 핸들러와 "#의 selectables1"을 설정하는 것입니다 감사합니다. 이 같은 표정 무언가 : 다음

$('#selectables1').bind('dragSetup', function() { 
    $(this).find('span:not(.dragReady)') 
    .draggable({ ... }) 
    .addClass('dragReady'); 
}); 

새를 추가 할 때마다 당신은 단지 호출 할 수

$('#selectables1').trigger('dragSetup'); 

Answer 2

을 당신은 한 번 추가 된 DOM 요소에 이벤트를 연결하는 live을 사용해야합니다 DOM이로드되었습니다. jQuery Doc for live