3

我想知道它是否可以使用类似的函数.delegate()，.on()或者任何可以监听 jquery UI 事件的方式，例如draggable. 我有以下内容：

HTML：

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

脚本：

$(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是动态添加的，所以这是我想要使用的方式delegateor on。

另请注意，我知道如何从 .ajax GET 的结果中添加可拖动的列表项？即使那个解决方案对我有用，我也必须修改 .post() 函数，这不是我要问的。

这是问题

4

3 回答 3

4

这是一个很常见的问题......如何使用委托来调用插件，并且没有圣杯之类的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 对象添加条件

于 2012-06-28T17:40:38.600 回答
3

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

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

见http://jsfiddle.net/hTCLB/

于 2012-06-28T17:16:46.860 回答
2

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

否则，您可以使用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 与 DOM 变异观察者

参考

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

于 2012-06-28T17:25:23.423 回答