Новый UL добавлен в DOM, но не преобразован в Сортируемый UL jquery - PullRequest
Новая
       3

Новый UL добавлен в DOM, но не преобразован в Сортируемый UL jquery

0 голосов
/ 16 октября 2019

Первый UL, который находится прямо на странице, прекрасно работает и может сортироваться. Когда я пытаюсь добавить другой UL с помощью JS или AJAX, это просто 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

1 Ответ

0 голосов
/ 16 октября 2019

Как я уже сказал Плагины запускаются с визуализированным 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 success и после добавления нового контента

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...