javascript - 在切换时销毁这个 jQuery 插件

Question

我已经编写了这个脚本，它可以切换表行，还添加了 Circliful 插件 ( https://github.com/pguso/jquery-plugin-circliful )，以便在行切换打开后为一些统计数据设置动画。 这效果很好，并且在切换的每一行上都有动画效果。 但是，如果我打开一行，关闭同一行，然后重新打开它，统计圆圈就会变得困惑，并且会添加另一堆额外的重复圆圈。

所以我需要知道一旦行再次关闭，如何“结束、杀死、销毁、解除绑定(bind)”(不确定术语)插件。然后重新打开时启动插件。

这是 fiddle - http://jsfiddle.net/62x36sk3/

jQuery(function($) {

      $("td[colspan=4]").find(".toggle").hide();

      $("table").click(function(event) {

            event.stopPropagation();
            var $target = $(event.target);

            if ( $target.closest("td").attr("colspan") > 1 ) {

                 $target.slideUp();

            } else {

                 $target.closest("tr").next().find(".toggle").slideToggle();
                 $target.closest("tr").next().find(".win").circliful();
                 $target.closest("tr").next().find(".place").circliful();

            }                    
      });
});

Answer 1

这就是我为您提供的，我查看了您使用的插件，它有点有趣，但我没有时间寻找它的重建功能所以一个简单的解决方案是每当您单击行时就重建。

首先清空容器，然后再次调用该函数。检查下面的代码并检查这个 updated version of your fiddle

我还更改了点击事件的分配，我将其更改为直接分配给 tr，因为它有一个标识符 class="info" ，至于您使用的内容，它分配给表中的所有元素，它只会查找最接近的 tr。没什么不同，但是效率更高。

$("tr.info").click(function(event) {
            event.stopPropagation();
            var $target = $(event.target);

            if ( $target.closest("td").attr("colspan") > 1 ) {
                 $target.slideUp();
            } else {
                 $target.closest("tr").next().find(".toggle").slideToggle();

                 $target.closest("tr").next().find(".win").html(''); // empty the contents
                 $target.closest("tr").next().find(".win").circliful();

                 $target.closest("tr").next().find(".place").html('');  // empty the content
                 $target.closest("tr").next().find(".place").circliful();
            }                    
});