javascript - 排序后，dblclick功能停止工作

Question

我有一个功能，当双击时，在段落背景中设置黄色。 它工作正常，直到我调用对这些段落进行排序的函数。 排序后，当用户再次单击两次时，dblclick 不起作用。

html 页面:

   <div class="row row-artigo">
     <div class="col-md-10 text-justify">
       <span class="artigo  highlight">                           
           I - Loren Ipsun Dolor;
       </span>
     </div>
     <div class="col-md-2 text-right">
      <div class="botoes">
        <span class="qtd-voto">1</span>                           
      </div> 
     </div> 
   </div>

highligh是双击后添加的类。双点击功能:

$("span.artigo").on("dblclick",(function(e){    
    if ($(this).hasClass( "highlight" )){
        $(this).removeClass("highlight");
        is_marcado = 0;
    }else{
        $(this).addClass("highlight");
        is_marcado = 1;
    }
}));

排序基于类qtd-voto，如下所示:

$("a#ordenacao").on("click",(function(e){    
    var $divs = $(".row-artigo");
     var ordenadoDiv = $divs.sort(function (a, b) {                
         return $(b).find('.qtd-voto').text() - $(a).find('.qtd-voto').text();
     });
     $("#container-artigos").html(ordenadoDiv);       
     $(".row-artigo").wrapAll($('<div class="article-post">'));    
}));

知道为什么会发生这种情况吗？

Answer 1

$("#container-artigos").html(ordenadoDiv) 替换现有的 DOM 内容，有效删除所有关联的事件监听器。请参阅https://api.jquery.com/html/#html-htmlString进行解释。

在文档上注册事件监听器将阻止这种情况

$(document).on("dblclick", "span.artigo", function(e) {
  ....
});

想看看它是否有效？