使用 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(/&quot;/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>

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

Writing new HTML using JQuery disables popover

jquery

popover