如何在jquery（ui）中刷新元素上的事件答案

【问题标题】：how to refresh events on element in jquery (ui)如何在jquery（ui）中刷新元素上的事件
【发布时间】：2018-08-12 17:54:49
【问题描述】：

有没有办法“刷新”应该应用在 jquery 元素上的事件？

为了更好地解释，这是我的情况。我有一个 document.ready() 函数，它可以在两个列表中完成它的工作：

列表 A 包含类 a 的元素，列表 B 包含类 b 的元素。

我想让用户使用 draggable/droppable 元素从列表 A 移动到列表 B，但在某种程度上它使用 .clone(true,true) 将元素克隆到列表 B 并使用 .removeClass("a") 和 @ 替换类987654326@。其他方式 - 将 B 中的元素拖到列表 A 时会从 B 中删除

上面解释的场景仅适用于页面加载时位于任一列表中的元素，但是当我将对象从 A 克隆到 B 时，它仍然是可拖动的，但在此程度上它的行为与 elem A 一样当试图拖动它时，拖动阴影从列表 A 中的原始位置开始，而不是我实际开始在列表中拖动的位置。考虑到这一点，我需要找到一种方法来“刷新”List B 中新克隆的元素，使其表现得像 List B 元素。

感谢您的支持。

【问题讨论】：

请创建一个代码 sn-p 或提供一些代码，以便我们帮助解决问题

标签： javascript jquery html jquery-ui jquery-ui-draggable

【解决方案1】：

我可以从您的问题中看到，您需要关闭某些元素的事件。为此，您可以使用 off() method 。

例如，请看下面的代码：

HTML

List A
<ul>
  <li class="draggable">item1</li>
  <li class="draggable">item2</li>
</ul>

List B
<ul class="droppable">

</ul>

$('.draggable').draggable({
  helper: 'clone'
}).click(function() {
  alert($(this).text());
});


$('.droppable').droppable({
  drop: function(ev, ui) {
    // Add element with all events
    var dropElement = ui.draggable.clone(true, true);
    $(this).append(dropElement);

    // Add element without any events
    var dropElementWithoutEvents = ui.draggable.clone(true, true).off();       
    $(this).append(dropElementWithoutEvents);
  }
});

ui.draggable.clone(true, true).off() 删除您拖动的元素的所有事件，click 事件不会通过单击它来触发，但对于dropElement，它会被触发。

Online demo (jsFiddle)

【讨论】：

您的回答没有帮助，因为您错过了重点。 droppable 中的第一个解决方案会导致我在原始帖子中提到的奇怪行为，而第二个解决方案不是解决方案，因为我不希望 A 中的元素在移至 B 时死亡，而是开始表现得像 B。跨度>
@DethoRhyne 我不希望 A 中的元素在移动到 B 时死亡 是什么意思？
从您的演示中使用 .clone(true,true).off() 将禁用克隆对象的所有事件。这不是预期的行为。当移动到 B 时，它应该表现得像本机 b 元素。我已经设法解决了这个问题，很快就会发布答案。

【解决方案2】：

我已经通过另一个 draggable() 调用运行克隆的元素来解决此问题。

在初始化时我有：

$( ".a" ).draggable({ 
    //...settings
});

$( ".b" ).draggable({ 
    //...settings
});

然后在完成所有内容后在 droppable 中，我将再次为 B 调用相同的可拖动对象：

 $("#B").droppable({
     accept: ".a",
     //...settings
     drop: function(event, ui) {
         var clone = $(ui.draggable).clone()
         clone.removeClass("a");
         clone.addClass("b");
         $("#B").append(clone);
         $(clone).draggable({ 
             //...sameSettings
         });
     }
 });

现在克隆的元素作为原生 B 元素工作，一切正常。

【讨论】：