title: JQuery click function works once, but required to work many
body: <p>I have a function that removes a div within another, and replaces it with a video when a link is clicked (which is in the div that was removed).</p>
  
  <p>When the video finishes, the video is removed, the div that was removed is placed BACK into the div.</p>
  
  <p>The problem is, if I am to click the link again, no response.</p>
  
  <p>Any ideas?</p>
  
  <p>JQuery Code</p>
  
  <pre><code>$('#panl-one a#watch-now').click(function(){
          var copy = $('#panl-one').html();
          $('#panl-one').html('&lt;video width="334" height="200" controls muted autoplay title="Video" id="myvideo"&gt;&lt;source src="My Movie.mp4"&gt;&lt;/video&gt;');
          var video= $('#myvideo')[0]; 
          var videoJ= $('#myvideo');        
          videoJ.on('ended',function(){
              $('#myvideo').hide();
              $('#panl-one').html('&lt;div&gt;&lt;p&gt;&lt;a href="#" id="watch-now"&gt;Watch again?&lt;/a&gt;&lt;/p&gt;&lt;/div&gt;');   
          });
          return false;
  });
  </code></pre>
  
  <p>HTML code</p>
  
  <pre><code>&lt;div class="video" id="panl-one" title="this is the panel title"&gt;
      &lt;div&gt;
      &lt;a href="#" class="get-link-name" id="link-one"&gt;This is the video title&lt;/a&gt;
      &lt;p&gt;Video
      &lt;a href="#" id="watch-now"&gt;watch now&lt;/a&gt;
      04:09
      &lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thanks in advance</p>