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

感谢您的帮助。

是给你任何提示的错误的堆栈跟踪？ – 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上弹出的确切错误。

答

@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); 
    }

}）;

答

我遇到了同样的错误，我认为，从我的测试中发现，当您在drop事件上分离或移除丢弃的项目时会发生这种错误。当使用原始元素作为助手。

我还在寻找更好的方法来分离和拖动的元素重新插入到DOM

答

它似乎与drop事件期间破坏降到项目。我可以通过延迟破坏调用来解决这个问题：

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

我应该在哪里写这个？我得到同样的错误，你回答。我赞成你的答案，因为它似乎也解决了我的问题。 – 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是您的一个选项，它似乎是一个非常干净的解决方案。

谢谢你，帮助了我。如果重复（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()

jQuery UI Droppable未捕获类型错误

相关推荐