使用 JQuery 编写新的 HTML 会禁用弹出框

Question

我正在使用 JQuery 的可排序和序列化来将位置保存到我的数据库中。 保存在数据库示例中的位置：["13","1","7","3","12","5","9","0","2","4","6","8","10","11"]

我有一个 UL 标记，每个列表都有一个类似这样的 id：category-0、category-1、category-2 直到 13。

所以在页面加载时，如果用户明显连接，我将像这样重新排序列表：

    var categoriesPos = '#{data.user.CategoriesPos}'; 
    categoriesPos = JSON.parse(categoriesPos.replace(/"/g,'"'));

    var categList = document.querySelectorAll('ul')[4]
    var categLi = categList.getElementsByTagName("LI");

    var categoriesP = [];

    for (var i = 0; i < 14; i++) {
        categoriesP.push(categLi[categoriesPos[i]])
    }

    $('.categories-sortable ul').html(categoriesP)

但是，我的问题是每个列表都有一个“更多..”按钮，可以在悬停时触发弹出框。 这一行打破了弹出框：$('.categories-sortable ul').html(categoriesP)

正如我所说，它可以正常工作，排序正确等等，唯一的问题是它打破了弹出框。

Answer 1

根据更多按钮的位置，对整个排序集合使用 jQuery prepend() 或 append()

// add event listener to keepme before rest of list gets modified
// since the element never gets removed from DOM will work after sort is done
$('#keepme').click(()=>console.log('clicked'))

const order = ["1","2","3"]

const items = $('.item').sort((a, b) => order.indexOf(a.id) -  order.indexOf(b.id))

$('#list').prepend(items)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="list">
  <div id="3" class="item">Three</div>
  <div id="1" class="item">One</div>
  <div id="2" class="item">Two</div>

  <div id="keepme">Keep me here</div>
</div>