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

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 2

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

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

Now when you call it using html onclick it will work

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

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

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 5

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 6

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.