Is it possible to use a jquery function such as delegate to listen to jquery ui events?

问题

i want to know if its possible to use a function like .delegate(), .on() or any in a way that it will listen to jquery UI events such as draggable. I have the following:

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) 
})

The element that is going to be draggable is dynamically added so that is way i want to use delegate or on.

Also note that i'm aware of How do I add draggable List Items from the result of a .ajax GET? and even that solution can work for me i have to modify the .post() function which is not what i'm asking.

Here is the problem

回答1:

This is a very common question....how to use delegation to invoke plugins , and there is no holy grail like on(). In the case of almost all jQueryUI widgets there is far more involved than simply binding events, the html and element data needs to be connstructed.

ALthough there is no delegation method, you can use $.ajaxComplete() as a global handler to initialize plugins , if it suits your application. It can be bound to any element, which allows using this within handler

 $('#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*/
     }

});

Can also add conditionals based on xhr object

回答2:

It is not possible to use event delegation to automatically create jQuery UI widgets. Your best bet is to explicitly destroy and recreate.

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

See http://jsfiddle.net/hTCLB/

回答3:

Can't you just execute a function calling the .draggable() in the callback of your Ajax requests?

Otherwise, you can observe the wrapper with a DOM Mutation Observer and use an anonymous function to call the .draggable() when new elements are appended. It's very similar to event delegation as you asked, but I'm not sure how good that is for older versions of IE.

Example code with 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

Also, if you can't use the Ajax call's callback for this, odds are there is a logic/design flaw in your application. I'd suggest taking a look on that before shoving down hacks as the DOM Mutation Observer.

来源：https://stackoverflow.com/questions/11249674/is-it-possible-to-use-a-jquery-function-such-as-delegate-to-listen-to-jquery-ui

标签

jquery

jquery-ui

jquery-ui-draggable