hide/toggle not working reliably

hide/toggle not working reliably

I have the following code, that for some strange reason will not execute the toggle code (near the bottom) every time through, and it seems to work on the second click.  Does anyone see an issue with my code that might be responsible for this? It's my belief that there is an issue with the way the file is being served, but I don't see how that makes sense.     Also setTImeout doesn't work as expected. I would expect it to not do anything for 3 seconds, but it starts making AJAX requests immediately.  Any insight is appreciated. 

  2.  $('#bayes-load').click(function(){
  3.                 var modelString = '';
  4. modelString = dataSource + '#';    
  5.                 modelString += model + ':Load'
  6.                 console.log(modelString);
  7.                 $.ajax({
  8.                 type: 'POST',
  9. url:'analytics.jsp',
  10.                 data:{q:modelString},
  11. beforeSend: function(){
  12.    $('#query-results').html('<img src="images/ajax-loader.gif"><p>Retrieving Model...</p>');
  13. }
  14. }).done(function recursionLoad(){     
  15.                 var timerLoad = setTimeout(function(){
  16.                         
  17.                     
  18.                     },3000)
  19.    
  20.                     $.ajax({
  21.                type:'GET',
  22.                url:'modelBN.xml',
  23.                beforeSend: function(){$('#query-results').html('<img src="images/ajax-loader.gif"><p>Loading...</p>'); },
  24.                timeout: 10000,
  25.                error: function(xhr, status, error){
  26.                 recursionLoad();
  27. //alert("Error: " + xhr.status + " - " + error)
  28.                },
  29.                dataType: 'xml',
  30.                cache:false,
  31.                success: function(data){
  32.                var html = '<h3>Nodes</h3><ul class="outer">';
  33.                $(data).find('node').each(function() { // Each node
  34.                var node = $(this);
  35.                html += '<li>' + node.find('name').text() + '<ul class="detail">'; // Embedded list
  36.                node.find('state').each(function() { // Each node state
  37.                html += '<li>' + $(this).text()
  38.                
  39.                var prob = $(this).attr('prob');
  40.                html += ': ' + prob;
  41.                prob = parseFloat(prob);
  42.                html +=  '<div style="height:8px; width:40px;" data-prob="' + prob*100 + '"></div>';
  43.                 
  44.                
  45.                
  46.                });
  47.             html += '</ul></li>'
  48.         });
  49.             html += '</ul>';
  50.         $('#query-results').html(html). // Add to DOM
  51.         on('click', '> ul > li', function() { // Toggle embedded display on click
  52.             $(this).find('ul').toggle();
  53.             $(this).toggleClass('minus');
  54.                 
  55.             
  56.             
  57.     }).find('ul ul').hide(); // Hide embedded initially

  59.         $("[data-prob]").each(function(){
  60.       $(this).progressbar({ value: $(this).data("prob") })
  61.       $(this).removeAttr("data-prob")
  62.         });
  63.             
  64.                }//end success
  65.                               
  66.            });//end ajax
  67.                 }); //end wrapper
  68.                     
  69.                     
  70.                     
  71.                 }); //end click