Question

我需要为我的web应用程序添加拖放功能。 jquery-ui成为我的首选。我已阅读jQuery-ui网站中的教程并开始编程。 如果我使用这个文件中的静态元素，这个函数工作正常。但是当我使用ajax从数据库中生成元素时，这些元素不能被拖放。 我粘贴下面我的代码：

<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(); 
}); 

这些代码可以显示雇员的信息，但拖动功能不起作用，我怎样才能解决这个问题？先谢谢你！

Answer 1

当文档准备就绪时，jquery在页面加载之后调用元素的draggable（）。在页面加载之后，与您的查询匹配的任何元素在默认情况下都不会将draggable（）应用于它们。

您在上面的注释中列出的解决方案（将.draggable（）应用于newDiv）在创建后对我来说很有意义。