title: Function not calling within an onclick event
body: <p>I want to add some HTML to the end of every youtube link to open up the player in a litebox. This is my code so far:</p>
  
  <pre><code>$(document).ready(function() {
    var valid_url = new RegExp('youtube\.com\/.*v=([a-zA-Z0-9_-]+)');
    var image_data = 'base64 encoded image';
  
    init();
  
    function init() {
      $('a').each(function() {
        if (valid_url.test($(this).attr('href'))) {
          $(this).after( ' &lt;img src="' + image_data + '" onclick="open_litebox(\'hi\');" /&gt;' );
        }
      });
    }
  
    function open_litebox(param) {
      alert(param);
    }
  });
  </code></pre>
  
  <p>It works to the point where it injects some HTML after the youtube link, like so:</p>
  
  <pre><code>&lt;img src="base 64 data" onclick="open_litebox('hi')"&gt;
  </code></pre>
  
  <p>But when I click this the <code>open_litebox()</code> function doesn't get called. Looking in the error console I can see an error that says <code>open_litebox is not defined</code>, but I have defined it.</p>
  
  <p>I'm pretty clueless as to what's going wrong here, could someone lend me a hand?</p>
  
  <p>Thanks.</p>