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是双击后添加的类。 dbl点击功能：

$("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) {
  ....
});

想看看是否可行？

排序后，dblclick函数停止工作

1 个答案: