カスタムUIウィジェットでjQuery .remove（）を呼び出すと無限ループが発生する

Question

私はuiPopoverと呼ばれるuiPopoverというカスタムjQuery UIウィジェットを作成しました。これはUIダイアログとよく似ています（実際にはほとんどのコードはコピー貼りです）。このウィジェットには、ウィジェットを非表示にしてDOMから削除するカスタムdestroyメソッドがあります。繰り返しますが、これはUIダイアログからコピー貼り付けされています。

destroy: function() { 
     var self = this; 

     if (self.overlay) { 
      self.overlay.destroy(); 
     } 
     self.close(); 
     self.element 
      .removeData('popover'); 
     self.uiPopover.remove(); 
     console.log('afterRemove') 

     return self; 
    }, 

奇妙なことは、これはいくつかのエラーをスローし、無限ループを引き起こすことがある：

$('#element').popover(); 
$('#element').remove(); 

私の知る限り見ることができるように、問題は、私は自動的に）（、それを.removeを呼び出すとき私のウィジェット（これはjQuery UIに組み込まれています）のdestroy（）を呼び出すと、destroyメソッドは自分の要素でremove（）をもう一度呼び出そうとし、destroy（）をもう一度呼び出すようにします。

しかし、奇妙なことは、これはUIダイアログでは起こらないということです。私はこれを行うときに：

$('#element').dialog(); 
$('#element').remove(); 

すべてが大丈夫です...そこに私のプラグインと間違って何かでなければならないが、私は何を把握することはできません。そこではありませんhttps://gist.github.com/2208569

Answer 1

ずっとあなたが脇のjQuery UI自体を修正することから、destroy()への再帰呼び出しについて行うことができます。

は、ここに私のプラグインの完全なソースです。あなたは、しかし、再び呼び出されてからremove()を防止することにより、チェーンを破ることができます。

destroy: function() { 
    var self = this; 

    if (self.overlay) { 
     self.overlay.destroy(); 
    } 
    self.close(); 

    if (self.element.data("popover")) { 
     self.element.removeData("popover"); 
     self.uiPopover.remove(); 
    } 

    return self; 
} 

注意をあなたはウィジェットフレームワークsupports prototype inheritanceとして、既存のウィジェットを強化するために、コピーして貼り付けコードする必要はありませんついでに。ウィジェットがコードベースを複製するのではなく$.ui.dialogから派生している場合にも、問題がまだ発生するかどうかを知ることは面白いでしょう。