使用脚本动态创建droppable div也是动态创建的

Question

I am dynamically creating a list of droppable divs with the javascript also dynamically included. The php looks like this:

echo "<li class=\"grayborder txdkgray\"><div id=\"queue".$i."\" style=\"width:300px; height:30px; text-align:center;\">*Drag a file here to run* </div></li>";
echo "<script> $('#queue".$i."').droppable( {hoverClass: 'hovered', drop: handleQueueDrop} ); </script>";

The problem is that the divs it creates are not working, I can't drop anything into them and the function doesn't run when I do. Is this a problem which the way I am echoing them?

Answer 1

You need an space here

... id=\"queue".$i."\"style=\"width:300 ...

like this

... id=\"queue".$i."\" style=\"width:300 ...

Also, you should run your code after load event. Convert this

echo "<script> $('#queue".$i."').droppable( {hoverClass: 'hovered', drop: handleQueueDrop} ); </script>";

to this

echo "<script> $(function(){ $('#queue".$i."').droppable( {hoverClass: 'hovered', drop: handleQueueDrop} ); }) </script>";