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.

  1. using jquery or java script append() function adding dom element instead of html()
  2. add draggable after 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

Popular posts from this blog

c# - Update a combobox from a presenter (MVP) -

How to understand 2 main() functions after using uftrace to profile the C++ program? -

How to put a lock and transaction on table using spring 4 or above using jdbcTemplate and annotations like @Transactional? -