函数不在onclick事件中调用

我想在每个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( ' ' ); } }); } function open_litebox(param) { alert(param); } }); 

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

但是当我点击这个时， 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() { } 

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

Answer 2

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

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

这些方面的东西：

 $(this).after( ' ' ); $('#abc').click(open_litebox); 

您必须使用这种方式为每个链接生成单独的ID，因此另一种方法是使每个标记具有已知的class属性，然后使用$('.abc')选择它（如果类是abc ）而不是$('#abc')并且一步完成（即作为$('a').each之后的单独调用$('a').each ）。

Answer 3

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

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

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

在JavaScript中，范围在function级别。 不在函数内的所有东西都会聚集到全局范围内。

Answer 4

原因是open_litebox()在document.ready函数内声明，因此无法从全局范围访问。

您可以将该函数移到document.ready之外，或者修改代码以使用jQuery（直接引用该函数）附加onclick处理程序：

 var link = $(' ' ).click(function () { open_litebox('hi'); }); $(this).after(link); 

Answer 5

有一个更整洁，更jQuery的方式来分配点击动作。

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

这解决了其他答案中描述的范围问题。 如果需要使用参数调用open_litebox（），请将其包含在我所做的匿名函数中，否则将调用该函数，然后将返回值传递给click操作。 否则，没有要传递的参数，分配就更简单了：

 $(this).click( open_litebox );