拖放動態生成的html元素

我需要爲我的web應用程序添加拖放功能。 jquery-ui成爲我的首選。我已閱讀jQuery-ui網站中的教程並開始編程。如果我使用這個文件中的靜態元素，這個函數工作正常。但是當我使用ajax從數據庫中生成元素時，這些元素不能被拖放。我粘貼下面我的代碼：拖放動態生成的html元素

<ul id="employee"> 
<li> 
<h5>33333333</h5> 
<img src='images/employee.png' width='96' height='96' /> 
</li> 

<li> 
<h5>33333333</h5> 
<img src='images/employee.png' width='96' height='96' /> 
</li> 

<li> 
<h5>33333333</h5> 
<img src='images/employee.png' width='96' height='96' /> 
</li> 

<li> 
<h5>33333333</h5> 
<img src='images/employee.png' width='96' height='96' /> 
</li> 
</ul> 

$(document).ready(function() { 
    $("#employee li").draggable(); 
});

這些代碼做工精細。我可以拖動元素。

然而，當我使用動態生成的HTML元素象下面這樣：

function loadEmployee() { 
    $.getJSON("employee!find.action", function(data) { 
     var showEmployee = $("#employee"); 
     showEmployee.html(""); 
     $.each(data.employeeList, function(i, employee) { 
      newDiv = $("<li>"); 
      var div = "<h5>" + employee.number + "</h5>"; 
      div += "<img src='images/employee.png' width='96' height='96' //>" 
      newDiv.html(div).appendTo(showEmployee); 
     }); 
     showEmployee.show(); 
    }); 
} 
$(document).ready(function() { 
    loadEmployee(); 
    $("#employee li").draggable(); 
});

這些代碼可以顯示僱員的信息，但拖動功能不起作用，我怎樣才能解決這個問題？先謝謝你！

來源

2011-11-01 Fan Wu

這是在SO上發現的一個常見問題。試試看jQuery的.live（）函數。可能您的可拖動元素沒有被應用，因爲它們是在可拖動init之後加載的。 –

我解決了這個問題。而不是使用$（「＃employee li」）。draggable（）;我將newDiv.html（div）.appendTo（showEmployee）命令更改爲newDiv.html（div）.appendTo（showEmployee）.draggable（）;我不確定這是否是一個好的解決方案，但它現在解決了我的問題。 –

當文檔準備就緒時，jquery在頁面加載之後調用元素的draggable（）。在頁面加載之後，與您的查詢匹配的任何元素在默認情況下都不會將draggable（）應用於它們。

您在上面的註釋中列出的解決方案（將.draggable（）應用於newDiv）在創建後對我來說很有意義。

來源

2011-11-01 03:23:57

回答

相關問題