title: jquery event.stopPropagation() doesn't seem to be working
body: <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>