2013-01-09 11 views
3

直到最近我有這個成立,這是所謂的多次:jQuery可拖動 - 如果它被應用兩次到一個元素會發生什麼?

   $('.rsh') 
        .draggable('destroy')        
        .draggable({ blah blah details }); 

destroy在那裏停止多拖動處理堆積在類。 AJAX正在創建新元素,並且該類的初始附件draggable不會觸及隨後創建的元素。

然而,當我更新到jQuery UI的1.9.2版本,它開始給我這個錯誤:

Error: cannot call methods on draggable prior to initialization; attempted to call method 'destroy'

所以我刪除了破壞線,它的甜味。除了...我懷疑我現在可能會增加越來越多的處理程序(這就是爲什麼destroy在那裏)。

我嘗試這樣做,但它不喜歡它:

if ($('.rsh').length) { 
    $('.rsh').draggable('destroy'); 
} 

兩個問題:每次我火拖動設置線時間附着在類(1)會不會有越來越多的處理程序? (2)如果是這樣,有關如何刪除它們的解決方案?

回答

6

不,不會有額外的處理程序綁定。 jQuery將初始化的實例註冊到元素,並且不會爲同一元素創建相同小部件的新實例。

至於你擔心的處理程序,這裏有一個快速檢查(jQuery的1.8+和UI 1.9+):

$('div').draggable(); 
console.log($._data($('div')[0], 'events')); 
$('div').draggable(); 
console.log($._data($('div')[0], 'events')); 

Fiddle

正如你所看到的,附加的處理對象不會更改嘗試在同一元素上初始化新的可拖動實例後。

編輯:雖然後續調用參數不會被忽略,但他們會擴展現有的小部件,如@Jason Sperske的答案所示。

+0

正確和第一:) +1 –

+0

感謝您的幫助。 – Nick

5

.draggable()的後續調用將附加到同一對象時的前一次調用擴展(而不是像我原先想象的那樣替換它們)。看到這個例子(從法布里西奧磨砂的擴展)(demo

<div>foo</div> 
<script> 
$('div').draggable({ 
    start: function() { 
    console.log("drag 1"); 
    } 
}); 
console.log($._data($('div')[0], 'events')); 
$('div').draggable({ 
    stop: function() { 
    console.log("drag 2"); 
    } 
}); 
console.log($._data($('div')[0], 'events')); 
</script> 

console.log你只看到這些消息:

drag 1 <- on start 
drag 2 <- on stop 
+0

噢,不錯,我忘了考慮當前部件的擴展。 +1來補充它。 –

+0

謝謝你。很有幫助。 +1但不確定誰打勾 – Nick

相關問題