javascript - 函数未在 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 链接之后注入(inject)一些 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() {

}

哦，我建议对您定义的变量执行相同的操作。也将它们移到您的准备函数之外，因为您将遇到与您的函数相同的问题。