jQuery AJAX로 div를로드 할 때 드래그 앤 드롭 나누기

Question

AJAX에 의해로드 된 div에 드롭해야하는 드래그 목록이 있습니다. 그러나 div가 AJAX에 의해로드되면 droppables 기능이 중단됩니다. 방정식에서 AJAX를 제거했는데 정상적으로 작동했습니다.

다음은 작동 코드입니다. 이 코드를 사용하면 내 .contentList의 항목을 #block div로 드래그 할 수 있으며 모든 것이 복숭아로 작동합니다.

<div id="block1"></div> 

$(".contentList").draggable(); 

var dropOpts = { 
    hoverClass: "activated", 
    tolerance: "pointer", 
    drop: getURL 
}; 

$("#block1").droppable(dropOpts); 

다음 코드는 jQuery .load를 통해 새 div를로드합니다.

$(document).ready(function() { 
    $("#template1").click(function() { 
     $("#dynamic-ui").load("/templates/newtemplate.html"); 
    }); 

newtemplate.html에는 동일한 ID의 div가 있습니다. # block1. 그러나 일단로드되면 더 이상 끌 수 없습니다. 어떤 도움이라도 대단히 감사하겠습니다!

Answer 1

newtemplate.html을 dom에로드 한 후 # block1을 삭제할 수 있도록 코드를 추가하십시오. 예 :

$(document).ready(function() { 
    $("#template1").click(function() { 
     $("#dynamic-ui").load("/templates/newtemplate.html"); 
     var dropOpts = { 
      hoverClass: "activated", 
      tolerance: "pointer", 
      drop: getURL 
     }; 

     $("#block1").droppable(dropOpts);   
    }); 
}); 

Answer 2

이벤트 바인딩은 브라우저가 웹 페이지를로드 할 때 발생합니다.
JavaScript가 지정된 디비전/요소를 찾지 못하면로드하는 동안 이벤트를 바인드하지 않습니다. 따라서 동적으로 생성 된 부서의 경우 이벤트를 바인딩하려면 jQuery live을 사용해야합니다.

고객님의 질문에 대해서는 this question에서 답변 해 드리겠습니다.

희망이 있으면 도움이 될 것입니다. 행운을 빌어 요.