是否可以使用委托等jquery函数来监听jquery ui事件？

Question

我想知道是否可以使用.delegate()、.on() 之类的函数或任何可以侦听 jquery UI 事件（例如draggable）的函数。我有以下内容：

HTML：

  <div id="wrapper"></div>​

javaScript：

$(function(){

  var addMe='<div id="draggable" class="ui-widget-content"><p>Drag me around</p></div>'

  $( "#wrapper" ).delegate('#draggable','draggable',function(){
       console.log('its something!');
  });

  //$(".draggable").draggable();
  $("#wrapper").append(addMe) 
})

将成为draggable 的元素是动态添加的，因此我想使用delegate 或on。

还请注意，我知道How do I add draggable List Items from the result of a .ajax GET?，即使该解决方案对我有用，我也必须修改 .post() 函数，这不是我要问的。

这里是problem

Answer 1

这是一个很常见的问题......如何使用委托来调用插件，并且没有像on()这样的圣杯。在几乎所有 jQueryUI 小部件的情况下，所涉及的远不止简单的绑定事件，还需要构造 html 和元素数据。

虽然没有委托方法，但如果它适合您的应用程序，您可以使用 $.ajaxComplete() 作为全局处理程序来初始化插件。它可以绑定到任何元素，允许在处理程序中使用this

 $('#content').ajaxComplete(function(e, xhr, settings){
     /* url conditional*/
      if (settings.url == 'getMoreDraggables.php') {
            $(this).find('.newDraggable').removeClass('newDraggable').draggable()
      }
      /* element conditional */
     if( $(this).find('.newDraggable').length){  
        /* run code for true*/
     }

});

也可以基于xhr对象添加条件

Answer 2

无法使用事件委托来自动创建 jQuery UI 小部件。您最好的选择是明确地销毁和重新创建。

$('.draggable').draggable('destroy');
$('.draggable').draggable();

见http://jsfiddle.net/hTCLB/

Answer 3

您不能在 Ajax 请求的回调中执行一个调用 .draggable() 的函数吗？

否则，您可以使用DOM Mutation Observer 观察包装器，并在添加新元素时使用匿名函数调用.draggable()。正如你所问的，它与事件委托非常相似，但我不确定这对旧版本的 IE 有多好。

使用观察者的示例代码：

var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;

var observer = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
        if (mutation.type === 'childList' && mutation.addedNodes.length) {
            $("#draggable").draggable();
        }
    });
});
observer.observe($('#wrapper')[0], { attributes: false, childList: true, characterData: true });

JSFiddle with DOM Mutation Observer

Reference

此外，如果您不能为此使用 Ajax 调用的回调，那么您的应用程序中可能存在逻辑/设计缺陷。我建议在作为 DOM Mutation Observer 推倒黑客之前先看一下。