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 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( ' <img src="' + image_data + '" onclick="open_litebox(\'hi\');" />' );
      }
    });
  }

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

It works to the point where it injects some HTML after the youtube link, like so:

<img src="base 64 data" onclick="open_litebox('hi')">

But when I click this the open_litebox() function doesn't get called. Looking in the error console I can see an error that says open_litebox is not defined, but I have defined it.

I'm pretty clueless as to what's going wrong here, could someone lend me a hand?

Thanks.

Answer 1

Your open_litebox function is in the scope of another function, so it is not globally visible. Instead of what you are doing, try using .click():

• http://api.jquery.com/click/

Something along these lines:

$(this).after( ' <img src="' + image_data + '" id='abc' />' );
$('#abc').click(open_litebox);

You would have to generate separate IDs for each of the links using this way, so another way is to make each of <img> tags have a known class attribute and then select it using $('.abc') (if the class is abc) instead of $('#abc') and do it in one step (i.e. as a separate call after your $('a').each).

Answer 2

The reason is that open_litebox() is declared inside the document.ready function, and therefore not accessible from a global scope.

You can move the function outside of document.ready, or, modify the code to attach the onclick handler using jQuery (which references the function directly):

var link = $(' <img src="' + image_data + '" />' ).click(function () {
   open_litebox('hi');
});
$(this).after(link);

Answer 3

This is a common problem when you first start working with jQuery. The problem here is that you have defined the function within the jQuery scope, which means that it is not accessible by just calling it like a normal function. A solution to your problem is to move your function definition outside the anonymous ready function that you written, like so:

$(document).ready(function() {

    // do your stuff here

});

// define your functions here 
function my_func() {

}

Oh and I would suggest doing the same for your variables that you have defined. Move them outside your ready function as well, because you will have the same problems as you did with your functions.

Answer 4

There's a much neater and more jQuery way to assign the click action.

function init() {
    $('a').each(function() {
        if(valid_url.test($(this).attr('href'))){
            $(this).click( function() { open_litebox('hi'); });
        }
    });
}

This solves the scope problem as described in the other answers. If you need to call open_litebox() with parameters, wrap it inside an anonymous function like I did, or else the function will be called and then the return value is passed to the click action. Otherwise, with no parameters to pass, the assignment is simpler:

$(this).click( open_litebox );

Answer 5

The other answers are correct in that moving your my_func declaration outside of $(document).ready() will solve your problem, but I'd like to clarify the reasoning, because it has nothing to do with jQuery in particular.

$(document).ready() is an event handler to which you're passing an anonymous function as a callback that should run when the browser notifies you that the document is ready.

Because you've defined my_func within the callback function, it's not visible from the global scope and thus cannot be called from the onclick property of your page's img element.

In JavaScript, scope is at the function level. Everything that isn't within a function gets clumped into the global scope.