摧毀這個jQuery插件切換上

我已經砍掉了這個腳本切換錶行，還添加了Circliful插件（https://github.com/pguso/jquery-plugin-circliful），以激活一些統計信息，一旦行被切換打開。這可以很好地工作，並在切換的每一行上顯示動畫。但是，如果我打開一行，關閉同一行，然後重新打開它，統計數據圈都是亂碼，它會添加另一堆額外的重複圈。摧毀這個jQuery插件切換上

所以我需要知道如何結束，殺死，破壞，取消綁定（不確定的術語）插件一旦行被切換關閉了。然後在重新打開時啓動插件。

這裏是小提琴 - 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(); 

      }      
     }); 
});

來源

2014-09-25 user537137

您可以展示小提琴示例或演示鏈接供我們查看。 – andrex 2014-09-25 02:12:36

剛剛添加到小提琴的鏈接。謝謝 – user537137 2014-09-25 02:31:55

這就是我要告訴你，我看着你使用的插件，它還挺insteresting，但我沒有時間去尋找它的功能重建所以一個簡單的解決方案就是隻要你點擊行就重建。

首先你清空容器然後再次調用函數。檢查下面的代碼，並檢查該updated version of your fiddle

我也改變click事件的任務，我將其更改爲直接分配給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(); 
      }      
});

來源

2014-09-25 03:15:53 andrex

最簡單的方法是在噴漆前清除圓環狀元素的兒童。它適用於你的示例，這裏是更新的小提琴 - http://jsfiddle.net/62x36sk3/2/。

在circliful函數頂部添加以下代碼。

this.empty();

但裏有一些潛在的問題，有些數據不被清除，並調整大小事件將被綁定multipe倍，因此較好的解決方案是實現在circliful銷燬方法。

來源

2014-09-25 03:29:29 lianbogo

試試這個。

(function ($) { 

    $.fn.circliful = function (options, callback) { 

     var settings = $.extend({ 
      // These are the defaults. 
      startdegree: 0, 
      fgcolor: "#556b2f", 
      bgcolor: "#eee", 
      fill: false, 
      width: 15, 
      dimension: 200, 
      fontsize: 15, 
      percent: 50, 
      animationstep: 1.0, 
      iconsize: '20px', 
      iconcolor: '#999', 
      border: 'default', 
      complete: null, 
      bordersize: 10 
     }, options); 

    return this.each(function() { 

     var customSettings = ["fgcolor", "bgcolor", "fill", "width", "dimension", "fontsize", "animationstep", "endPercent", "icon", "iconcolor", "iconsize", "border", "startdegree", "bordersize"]; 

     var customSettingsObj = {}; 
     var icon = ''; 
     var endPercent = 0; 
     var obj = $(this); 
     var fill = false; 
     var text, info; 

     // ADDED 
     // ***************************************** 

     // already this instance is ran circleful 
     if(obj.hasClass('circliful')){ 
      return; 
     } 

     // *****************************************

來源

2014-09-25 03:51:12 easywaru

摧毀這個jQuery插件切換上

回答

相關問題