title: Using Javascript innerHTML to replace an onClick link with a different onClick link results in onClick not working
body: <p><strong>Scenario</strong></p>
  
  <p>I am building an HTML based Application with a set window size. I have created a link called "More >>" that when clicked has an onClick event that calls a resizeMore() function that increases the width of the application AND at the same time runs a document.getElementById(IDHERE).innerHTML to replace the "More >>" link with a "&lt;&lt; Less" link that has an onClick event to a resizeLess() function that basically does the same in reverse (resizes the window back to original size and replaces "&lt;&lt; Less" with "More >>" again so that the process can be repeated indefinitely to shrink or expand the window).</p>
  
  <p>On the first click of the "More >>" link, it resizes the window correctly, and correctly changes the innerHTML to now be a "&lt;&lt; Less" link with a different onClick event. However, clicking the "&lt;&lt; Less" link does nothing, as if it doesn't recognize an onClick event at all.</p>
  
  <p>However, I know that the JS function DOES work because if I create 2 separate links that each have an onClick event to the 2 resize functions, both work as I'd expect. It only appears to be when I change from More >> to &lt;&lt; Less with innerHTML that the onClick is not working anymore.</p>
  
  <p><strong>HTML Code</strong></p>
  
  <pre><code>&lt;p id="moreorless"&gt;
    &lt;a href="#" class="needMore" onClick="javascript:resizeMore();"&gt; More &gt;&gt; &lt;/a&gt;
  &lt;/p&gt;
  </code></pre>
  
  <p><strong>JavaScript Code</strong></p>
  
  <pre><code>function resizeMore() {
  document.getElementById('moreorless').innerHTML = "&lt;a href='#' class='needMore' onClick='javascript:resizeLess();'&gt; &lt;&lt; Less &lt;/a&gt;";
  }
  
  function resizeLess() {
  document.getElementById('moreorless').innerHTML = "&lt;a href='#' class='needMore' onClick='javascript:resizeMore();'&gt; More &gt;&gt; &lt;/a&gt;";
  }
  </code></pre>
  
  <p><strong>FIDDLE</strong></p>
  
  <p>I have created a JSFiddle to try to give an example of my issue, but for some reason even though the same code partially works for me inside my source code, JSFiddle is not doing ANYTHING when I click on my 'More >>' link. Regardless, I have provided a JSFiddle here which has all of the code that I am trying to use. (I do not know why it doesn't do anything in the Fiddle but partially works on my site) - <a href="http://jsfiddle.net/NMV5w/" rel="nofollow">http://jsfiddle.net/NMV5w/</a></p>