排序元素顺序后，工具提示停止工作

Question

我有一个元素列表，可以使用我在stackoverflow上找到的这个javascript以升序/降序按价格或pax重新排序：

var priceAscending = false;
var ratingAscending = true;

$('.container').on('click','.sortbyprice',function(){
ratingAscending = true;
var sorted = $('.listings').sort(function(a,b){
    return (priceAscending ==
           (convertToNumber($(a).find('span').html()) < 
            convertToNumber($(b).find('span').html()))) ? 1 : -1;
});
priceAscending = priceAscending ? false : true;

$('.results').html(sorted);
})
$('.container').on('click','.sortbypax',function(){ 
priceAscending = true;
var sorted = $('.listings').sort(function(a,b){
    return (ratingAscending ==
           (parseFloat($(a).find('.pax').html()) < 
            parseFloat($(b).find('.pax').html()))) ? 1 : -1;
});
ratingAscending = ratingAscending ? false : true;

$('.results').html(sorted);
});

var convertToNumber = function(value){
 return parseFloat(value.replace('$',''));
}

我不确定上面的代码是如何编写的（因为我认为问题出在这里）但是我再也不是javascript的专家所以我不知道。

然后我还得到了Tooltipster插件，显然可以显示工具提示。

现在请看我的FIDDLE

问题：

1）在点击SORT BY PRICE或SORT BY PAX之前 ，请将鼠标悬停在价格下方的较小数字上，以查看其工具提示。

2）现在点击SORT BY PRICE或SORT BY PAX ，然后再次尝试将鼠标悬停在小号码上。 您会注意到工具提示不再起作用。

如果刷新页面或按下Js Fiddle中的RUN，则工具提示将一直有效，直到再次对它们进行排序。

为什么是这样？

在使用Tooltipster插件之前，我实际上是在使用MiniTip插件但是当我遇到上面的问题时（是的，这个插件也发生了同样的问题）我决定使用另一个插件（Tooltipster）因为我想也许有一些与MiniTip发生冲突。 似乎问题可能在于排序 javascript代码？

Answer 1

当HTML被覆盖时，工具提示插件会丢失元素，这并不奇怪。

而不是这个：

$('.results').html(sorted);

… 做这个：

$('.results').append(sorted);

这会将元素移动到正确的顺序而不会覆盖它们。

尽管它的名称，当你用现有元素调用append()时，它会被移动而不是被添加。 但是当你调用html() ，你会覆盖已经存在的东西。 工具提示插件适用于现有元素，因此在被覆盖时会丢失它们

此外，您可以简化：

priceAscending = priceAscending ? false : true;

......对此：

priceAscending = !priceAscending;

更新小提琴