jquery event.stopPropagation() doesn't seem to be working
<p>I am trying to create a replica treeview using an unordered list. I dynamically append to this list using ajax, and create child lists. I have used event.stopPropagation() to prevent the parent event from firing, but am unable to prevent grandparent events from firing. Here is my code.</p>

<pre><code>$('.child').click(function(event) {    

var uid = $(this).attr('id').substring(10);      
alert($('#childnodes' + uid).html());  
var childProd = //an ajax command is here which gets list items          
$(this).append(childProd);           
$('#span' + uid).text('-');
$('#childnodes' + uid).unbind();
$('.child' + uid).bind('click', child);
$('#childnodes' + uid).bind('click', parent);

event.PreventDefault();
event.stopPropagation();
 });

function parent(event) {

alert("The parent fired.");

if (event.target != this) {
   return true;
   } 

var uid = $(this).attr("id").substring(10); 
$('#span' + uid).text('+');
$('#childnodes' + uid).unbind();       

$('#childnodes' + uid).childnodes().empty();
$('#childnodes' + uid).text('');
$('#childnodes' + uid).bind('click', child);

event.preventDefault();
event.stopPropagation();

}

function child(event) {     
 if (event.target != this){     
   return true;
 } 

 var uid = event.target.id.substring(10);
 var childProd = //ajax command which I retrieve list items.

  $('#childnodes' + uid).append(childProd);           
  $('#span' + uid).text('-');      
   //unbind the event
   $('#childnodes' + uid).unbind();
   $('#childnodes' + uid).bind('click', parent);
  event.preventDefault();
  event.stopPropagation();  
   }
</code></pre>

<p>So essentially I start with this list</p>

<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>

<p>Then I expand one of them with a click event</p>

<ul>
<li>Item A</li>
<li>Item A1</li>
<li>Item A2</li>
<li>Item B</li>
<li>Item C</li>
</ul>

<p>I can click Item A1 and ItemA2 and only trigger their events to get this</p>

<ul>
<li>Item A</li>
<li>Item A1</li>
<li>Item A1B</li>
<li>Item A2</li>
<li>Item B</li>
<li>Item C</li>
</ul>

<p>Now the problem is if I hit Item A1B (a grandchild element) I then trigger Item A's delete event. Does anyone have any suggestions for this problem?</p>
