Trying to generate new droppable elements with ajax results

Trying to generate new droppable elements with ajax results

Hello,

I'm pretty new to jQuery, but love it so far!

Here's my scenario:
I have a tree made using JSTree. The tree is displayed via AJAX, as in, the tree isn't displayed completely on initializaiton. As you expand the nodes, it makes a call to the server to find and display more children. I want each node to be a droppable element so that l can drag stuff onto it and know the ID of the tree node it was dropped on.

The problem:
The problem is that no matter which node I drop something onto, it sees the whole tree as one droppable element and returns the ID of the root node, not the child/grandchild which was actually dropped on.

I tried the livequery plugin, but that doesn't seem to work.

Here's my code for the droppable:

  1.   $("#tree_container li").livequery(function(){
  2.         $(this).droppable({
  3.            hoverClass: 'drophover'

  4.             ,greedy: false

  5.             ,drop: function(event, ui) {

  6.                 //get the nodeID from the ID of $this

  7.                 var this_nodeID = $(this).attr("id").replace("node_", "");

  8.                 alert(this_nodeID);

  9.                 }

  10.         })

  11.     });              

EDIT:
I should also mention what the tree looks like that's being dropped on. The ajax returns nested <ul> and <li> elements. I am trying to drop on the <li> elements.

Here's what the tree looks like after it's been expanded a bit via ajax:
(<li id="node_23"> is the root. All other nodes were appended via ajax after droppable was initialized, and I cannot drop onto them specifically. It always thinks I drop onto <li id="node_23">)
  1. <div id="tree_container">
  2.       <ul>
  3.             <li id="node_23">
  4.                   Node 23
  5.                   <ul>
  6.                         <li id="node_9">
  7.                               Node 9
  8.                               <ul>
  9.                                     <li id="node_2">
  10.                                           Node 2
  11.                                     </li>
  12.                               </ul>
  13.                         </li>
  14.                   </ul>
  15.             </li>
  16.       </ul>
  17. </div>


Any thoughts or ideas?


Thanks in advance,
Dan