时间戳

首页 > 解决方案 > 新的 UL 添加到 DOM 但未转换为可排序的 UL jquery

jquery - 新的 UL 添加到 DOM 但未转换为可排序的 UL jquery

问题描述

直接在页面上的第一个 UL 效果很好，并且可以排序。当我尝试使用 JS 或 AJAX 添加另一个 UL 时，它只是一个 UL 并且无法排序。有没有办法将 HTML UL 转换为 jquery 排序？

    <html lang="en">

<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$( function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
} );

$( function() {
$( "#sortable2" ).sortable();
$( "#sortable2" ).disableSelection();
} );


function myFunctionNew() {
var node = document.createElement("LI");
var textnode = document.createTextNode("Water");
node.appendChild(textnode);
document.getElementById("sortable").appendChild(node);
}

function myFunction(img_src) {
document.getElementById("sortable").innerHTML += "<li class=ui-state-default><span class=ui-icon ui-icon-arrowthick-2-n-s></span><img src="+img_src+".jpg></li>";
}


function myFunctionNewNEW()
{
document.getElementById("testing").innerHTML ="<ul id=sortable2><li>item 1</li><li>item 2</li><li>item 3</li></ul>";
}
</script>


</head>

<body>

<ul id="sortable">
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
</ul>

<br/><br/><br/>
<a href="javascript:void(0);" onclick=myFunction('person')>Person</a>
<a href="javascript:void(0);" onclick=myFunction('person2')>Person2</a>
<a href="javascript:void(0);" onclick=myFunctionNew()>Add ME</a>
<a href="javascript:void(0);" onclick=myFunctionNewNEW()>NEW Add ME</a>

<div id=testing>test area</div>

</body>

</html>

添加到 html 页面的添加项目应该是可排序的 UL jquery

标签： jqueryajax

解决方案

正如我所说，插件使用呈现的 HTML 运行。并且无法检测到新添加的内容，直到您刷新插件或在附加新内容后再次调用插件..所以sortable在附加内容后尝试使用$("#sortable2").sortable('refresh');或再次调用插件$("#sortable2" ).sortable(); 

$( function() {
  $( "#sortable" ).sortable();
  $( "#sortable" ).disableSelection();
});


function myFunctionNew() {
  var node = document.createElement("LI");
  var textnode = document.createTextNode("Water");
  node.appendChild(textnode);
  document.getElementById("sortable").appendChild(node);
}

function myFunction(img_src) {
  document.getElementById("sortable").innerHTML += "<li class=ui-state-default><span class=ui-icon ui-icon-arrowthick-2-n-s></span><img src="+img_src+".jpg></li>";
}


function myFunctionNewNEW()
{
  document.getElementById("testing").innerHTML ="<ul id=sortable2><li>item 1</li><li>item 2</li><li>item 3</li></ul>";
  $("#sortable2").sortable();  //<<<<<<<<<< HERE
  $("#sortable2").disableSelection(); //<<<<<<<<<< HERE
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<ul id="sortable">
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
</ul>

<br/><br/><br/>
<a href="javascript:void(0);" onclick=myFunction('person')>Person</a>
<a href="javascript:void(0);" onclick=myFunction('person2')>Person2</a>
<a href="javascript:void(0);" onclick=myFunctionNew()>Add ME</a>
<a href="javascript:void(0);" onclick=myFunctionNewNEW()>NEW Add ME</a>

<div id=testing>test area</div>

与您的想法相同，ajax您需要在 ajax 成功回调函数中并在添加新内容后调用插件

推荐阅读