JQuery UI draggable not working on newly created DOM element

Question

I have a DOM element that can be dragged using jQuery UI.All works fine, but when I create some element using jQuery, then they are not dragged at all. iee

$('div.draggable').draggable(); //Existing element , it works :) $('p.draggable').draggable() ; //Newly created paragraph with same class name, it doesnt work at all :( 

Thanks in advance!

I try This:

 <script type="text/javascript"> $(document).ready(function(){ $('body').append('<p class="draggable">Newly Created Paragraph</p>'); $('p.draggable').draggable(); **//This is not working** }); </script> 

However, somehow it works

  <script type="text/javascript"> $(document).ready(function(){ $('body').append('<p class="draggable">Newly Created Paragraph</p>') .find('p.draggable').draggable(); **This is working** }); </script> 

Answer 1

I know it has been a while, but this issue has recently overheard me too. As already mentioned, you need to re-run .draggable() for the newly created item, but this will not work if you defined certain parameters in .draggable() . In addition, what did not work is to put $().draggable() in the function, and then call the function after creating a new element (this trick, however, works with droppables - go figure reset).

In any case, the long story is short -> Putting $().draggable() into the function, and then calling the function after creating a new DID WORK element, but I had to TAKE OUTPUT from the document ready function ..... after I turned it off , he worked.

You can call this function so many times, and it continues to work after each created element. It seems if this is in the document.ready statement, then this is a one-time deal.

Hope this helps.

Answer 2

You need to call draggable () after the newly created element is inserted into the DOM.

The reason is that the first line of code matches only existing elements. Recently created items are not selected in this first row.

Answer 3

I had this problem, but after reading this I could solve it. so you need to call the draggable () method again after creating a new element, this is my code:

 $(".in-browser").each(function(){ $(this).dblclick(function(){ var browseIn = $(this).data("href"); var browserHTML = '<div class="browser draggable">\ <ul class="browser-buttons">\ <li>_ \ <li># \ <li>x \ </ul>\ <div class="browser-win-container">\ <div class="addressbar"></div>\ <iframe class="opening-window" src="'+browseIn+'"></iframe>\ </div>\ </div>'; $("body").append(browserHTML); $(".draggable").draggable(); //look at here }); }); 

Answer 4

You must call the draggable () function every time you call the event action:

 $('body').on('click', '.add-new-table', function () { $( ".canvas" ).prepend('<div class="ui-widget-content draggable"><p>Drag me</p></div>'); $(function(){ $(".draggable" ).draggable({ containment: "parent" }); }); }); 

Answer 5

Actually it seems that there is a problem with draggable. When you add some htmlTag and then try to find it and make it draggable, it will not recognize it. try creating a new element using createElement and then add it. Hope it works.

 var newEle = document.createElement('p'); $(newEle).attr("class","draggable").draggable(); $('body').append($(newEle)); 

or

 var newEle = document.createElement('p'); $(newEle).attr("class","draggable"); $('body').append($(newEle)); $('p.draggable').draggable(); 

Answer 6

You need to apply draggable to the instance of the newly created object, the rewritten code:

 <script type="text/javascript"> $(document).ready(function(){ var newElement = '<p class="draggable">Newly Created Paragraph</p>'; $('body').append(newElement); newElement.draggable(); **//This is working** }); 

Now it should work.