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的旧版本有多好。

使用Observer的示例代码：

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破解。

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

3 个答案: