函数不在onclick事件中调用

Question

我想在每个youtube链接的末尾添加一些HTML,以便在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\');" />' );
      }
    });
  }

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

它可以在youtube链接之后注入一些HTML,就像这样:

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

但是当我点击这个时,open_litebox()函数不会被调用.查看错误控制台我可以看到一个错误open_litebox is not defined,但我已经定义了它.

我对这里出了什么问题一无所知,有人可以帮我一把吗？

谢谢.

Answer 1

当您第一次开始使用jQuery时,这是一个常见问题.这里的问题是你已经在jQuery范围内定义了这个函数,这意味着它只是像普通函数一样调用它是不可访问的.解决问题的方法是将函数定义移到您编写的匿名就绪函数之外,如下所示:

$(document).ready(function() {

    // do your stuff here

});

// define your functions here 
function my_func() {

}

哦,我建议你为你定义的变量做同样的事情.将它们移到准备好的功能之外,因为您将遇到与功能相同的问题.

Answer 2

您的open_litebox函数属于另一个函数的范围,因此它不是全局可见的.而不是你在做什么,尝试使用.click():

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

这些方面的东西:

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

你必须使用这种方式为每个链接生成单独的ID,所以另一种方法是使每个<img>标签都具有已知class属性,然后使用$('.abc')(如果是类abc)而不是$('#abc')一步完成它(即作为你之后的单独电话$('a').each).

Answer 3

其他答案是正确的,因为将my_func声明移到外面$(document).ready()会解决你的问题,但我想澄清一下推理,因为它与jQuery没有任何关系.

$(document).ready() 是一个事件处理程序,您将匿名函数作为回调传递给该回调函数,该回调函数应在浏览器通知您文档已准备就绪时运行.

因为您已my_func在回调函数中定义,所以它在全局范围内不可见,因此无法从onclick页面img元素的属性中调用.

在JavaScript中,范围在功能级别.不在函数内的所有东西都会聚集到全局范围内.