jQuery on 'click' not triggering after change to a bootstrap table
<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>