jQuery draggable - 如果对元素应用两次会发生什么？

Question

直到最近我才设置了这个设置,这个设置被多次调用:

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

那destroy是为了阻止多个可拖动的处理程序累积在课堂上.AJAX正在创建新元素,并且draggable对类的初始附件不会触及随后创建的元素.

但是,当我更新到jQuery UI的1.9.2版时,它开始给我这个错误:

错误:在初始化之前无法调用draggable上的方法; 试图调用方法'destroy'

所以我删除了破坏线,它很甜.除了......我怀疑我现在可能会在课堂上添加越来越多的处理程序(这就是为什么它destroy首先出现在那里).

我试过这个,但它不喜欢它:

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

两个问题:(1)每次打开可拖动的设置线时,是否会有越来越多的处理程序附加到班级？(2)如果是这样,有关如何删除它们的任何解决方案？

Answer 1

不,不会有额外的处理程序限制.jQuery将初始化的实例注册到元素,并且不会为同一元素创建同一小部件​​的新实例.

当你担心处理程序时,这里有一个快速检查(jQuery 1.8+和UI 1.9+):

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

小提琴

如您所见,在尝试初始化同一元素上的新可拖动实例后,附加的处理程序对象不会更改.

编辑:带有参数的后续调用不会被忽略,而是会扩展现有的小部件,如@Jason Sperske的回答所示.

Answer 2

后续调用.draggable()在附加到同一对象时扩展先前的调用(而不是像我原先想象的那样替换它们).看这个例子(从FabrícioMatté扩展)(演示)

<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