title: jQuery on 'click' not triggering after change to a bootstrap table
body: <h1>situation</h1>
  
  <p>I am using bootstrap to render a table based on values in an array of objects. I have a select which has a jQuery on ('change') method attached so that when an item from the list is selected, a new table is rendered based on the selected value.</p>
  
  <p>the table uses bootstrap collapse to show/hide rows from the table when the top row is clicked.  the last item in the row has a glyphicon arrow which shows the row can be folded/unfolded as the picture below shows</p>
  
  <p><a href="http://i.stack.imgur.com/mpUIl.png" rel="nofollow">collapse with glyphicon</a></p>
  
  <p>I am using the below jQuery to toggle the icon</p>
  
  <pre><code>$('#tog').on('click', function() {
    console.log("tog clicked");
    $(this).find('span').toggleClass('glyphicon-arrow-up glyphicon-arrow-down');
  });
  </code></pre>
  
  <p>so far I have this all working as shown with this fiddle <a href="http://jsfiddle.net/vgfb74u0/" rel="nofollow">http://jsfiddle.net/vgfb74u0/</a></p>
  
  <h1>Problem</h1>
  
  <p>the issue I am facing is that when a new table is rendered based on the selected item the jQuery that changes the glyphic does not trigger so when the table unfolds the icon remains the same.</p>
  
  <p>I have put in some console.log at the start of the method and I never see it firing. so to my newbie eyes the click event is never triggered.</p>
  
  <p>I'm surprised that i've managed to get this far and at a loss to what the issue might be so any help, pointers or advise is most welcome!</p>