Function not calling within an onclick event

Question

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:

$(document).ready(function() {
  var val         


        

Answer 1

I landed on this page because I faced similar issue and there is not a single post on stackoverflow that actually fixes this issue.

After spending almost half an hour trying to fix this The best solution to this problem to have your function available to be fired from html onclick is by defining a variable at the first line outside and then use that variable to store the function inside that variable.

var myAlert;
$(document).ready(function(){
    myAlert = function(msg){
        alert(msg);
    }
}

Fixed version of the actual asked question is below:

var open_litebox;
$(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( ' ' );
      }
    });
  }

  open_litebox = function(param) {
    alert(param);
  }
});

Now when you call it using html onclick it will work