jQuery UI Droppable未捕獲類型錯誤

在使用CoffeeScript的Backbone應用程序中使用jQuery UI Droppable。

功能沒有問題，一切工作都是按照我的意圖進行的，但每次丟棄項目時我仍然收到這個控制檯錯誤。

Uncaught TypeError: Cannot read property 'options' of undefined

代碼可投放：

@$el.droppable 
     tolerance: 'pointer' 
     hoverClass: 'drop_hover' 
     accept: '.item' 

     drop: (e, ui) => 
      draggedItem = ui.draggable 

      itemId = draggedItem.attr 'data-id' 

      allInstances = @model.collection.models 

      findItems = for instance in allInstances 
          instanceItems = instance.get 'items' 
          instanceItems.getByCid itemId 


      compacted = _.compact findItems 

      droppedItem = compacted[0] 

      droppedCollection = droppedItem.collection 

      droppedCollection.remove droppedItem if _.include droppedCollection.models, droppedItem 

      @itemCollection.add droppedItem unless _.include @items, droppedItem

就像我說的功能是否正常工作，我只是想擺脫錯誤的，如果有人知道什麼是我可以試着調試。

堆棧跟蹤

Uncaught TypeError: Cannot read property 'options' of undefined 
a.ui.plugin.add.stopjquery-ui.js:49 
a.ui.version.a.extend.plugin.call  jquery-ui.js:9 
a.widget._trigger      jquery-ui.js:49 
a.widget._mouseStop      jquery-ui.js:49 
a.widget._mouseUp      jquery-ui.js:28 
a.widget._mouseUp      jquery-ui.js:49 
a.widget._mouseDown._mouseUpDelegate jquery-ui.js:28 
f.event.dispatch      jquery-1.7.1.min.js:3 
f.event.add.h.handle.i     jquery-1.7.1.min.js:3

感謝您的幫助。

來源

2012-03-19 mgaughan

是給你任何提示的錯誤的堆棧跟蹤？ – dira 2012-03-20 12:42:47

對我沒有用處。我將它添加到問題中。 – mgaughan 2012-03-20 13:43:20

然後看起來像一個jQuery問題。看看這個http://forum.jquery.com/topic/on-draggable-destroy-uncaught-typeerror-cannot-read-property-options-of- undefined – dira 2012-03-20 14:23:56

這似乎是終於在v1.11.0妥善固定，不都在這裏提出的解決方法：

http://bugs.jqueryui.com/ticket/6889

看來現在刪除原始可拖動項目不會導致此錯誤，因爲屬性現在存儲在instance字段中。我已經確認v1.11.0修復了在v1.10.4上彈出的確切錯誤。

來源

2014-07-14 23:01:00

@dira指向一個線程，其問題圍繞着jQuery UI中的相同代碼，但是那裏的解決方案並不適合我。

我最終評論了jQuery UI源代碼，錯誤消失了。

和以前一樣，一切仍然按需要工作。

我評論出塊：

$.ui.plugin.add("draggable", "cursor", { 
    start: function(event, ui) { 
    var t = $('body'), o = $(this).data('draggable').options; 
    if (t.css("cursor")) o._cursor = t.css("cursor"); 
    t.css("cursor", o.cursor); 
    }, 
    stop: function(event, ui) { 
    var o = $(this).data('draggable').options; 
    if (o._cursor) $('body').css("cursor", o._cursor); 
    }

}）;

來源

2012-03-30 19:46:48 mgaughan

我遇到了同樣的錯誤，我認爲，從我的測試中發現，當您在drop事件上分離或移除丟棄的項目時會發生這種錯誤。當使用原始元素作爲助手。

我還在尋找更好的方法來分離和拖動的元素重新插入到DOM

來源

2012-10-26 18:40:09

它似乎與drop事件期間破壞降到項目。我可以通過延遲破壞調用來解決這個問題：

function(evt,ui) { 
    setTimeout((function() { 
     $(this).draggable("destroy"); 
    }).bind(ui.draggable),50); 
}

來源

2012-10-31 04:07:26 jdub

我應該在哪裏寫這個？我得到同樣的錯誤，你回答。我贊成你的答案，因爲它似乎也解決了我的問題。 – NullPointer 2013-09-28 05:52:48

對於我來說，沒有一個提出的解決方案的工作。正如你已經提到的那樣，這是因爲在下落完成之前刪除了元素。我的這個非常簡單的解決方案並不是remove()這個元素，而是隻有detach()這個元素，並將它追加到其他地方。

aDiv.droppable({ 
    drop: function(event, ui){ 
    ui.draggable.remove(); 
    anotherDiv.append(ui.draggable); 
    } 
})

這給了我的選項例外：

所以對我來說，我從移動

aDiv.droppable({ 
    drop: function(event, ui){ 
    ui.draggable.detach(); 
    anotherDiv.append(ui.draggable); 
    } 
})

由於jQuery's detach() documentation states這個工程，因爲它」 ......保持與相關聯的所有數據的jQuery刪除的元素「。

如果detach和append是您的一個選項，它似乎是一個非常乾淨的解決方案。

來源

2012-11-27 09:19:28

謝謝你，幫助了我。如果重複（1000次）detach（），這會導致內存泄漏嗎？ – 2013-01-19 12:07:23

分離只從DOM中取消鏈接元素，所以它不創建新的對象。內存佔用應該保持大致相同。但是，如果你真的不再需要這些元素，我肯定會在以後完全刪除它們。也許一個'setTimeout（...，1000）'實際上在延遲後刪除它們，對你有用。 – 2013-01-19 14:44:57

我聽說''setTimeOut（...，0）'導致函數以某種方式異步行爲，我可以在這裏使用它，或者我必須使用一定的時間（如你所說的）？ – 2013-01-19 19:02:30

我的解決方法是利用可拖動的STOP事件。

當一個項目被刪除並準備刪除時，將一個事件發回到可拖動視圖來設置@isRemove = true。可拖動視圖應該在停止事件是這樣的：

self = @ 
@$(".selector").draggable 
    stop: (event, ui) -> 
    if self.isRemove 
     self.remove()

來源

2013-02-20 09:52:03 alekkus

jQuery UI Droppable未捕獲類型錯誤

回答

相關問題