Question

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

Answer 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