php - Draggable divs not working if created by Ajax -
i'm using jquery , ajax load bunch of divs scrollable div ("letterholder"):
<!doctype html> <html> <head> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery-ui.min.js"></script> <script type="text/javascript"> $.ajax({ url: "myphpscript.php", datatype: "json", success: function(result) { $(".letterholder").html(result['letter_array']); } }); </script> </head> <body> <div class="letterholder"> </div> </body> </html> the php script retrieves list of filenames database , loads them letterholder, ends looking this:
<div class="letterholder"> <div class="drag_letter">file1</div> <div class="drag_letter">file2</div> <div class="drag_letter">file3</div> etc. </div> now, want make filename divs draggable, not working:
$(".drag_letter").draggable({ cursor: 'move', revert: true, helper: 'clone' }); it doesn't work if put draggable code page header, nor work if put code @ end of page.
this working fine before tried creating divs using ajax.
- using jquery or java script
append()function adding dom element instead of html() - add
draggableafter appending elements
you should send file names file1... file2... json array server
and rewrite this:
<script type="text/javascript"> $.ajax({ url: "myphpscript.php", datatype: "json", success: function(result) { $.each(result,function(k,v){ $(".letterholder").append($('<div></div>').html(v).addclass('drag_letter').draggable({ cursor: 'move', revert: true, helper: 'clone' })); }); } }); </script>
Comments
Post a Comment