函数未在 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，所以它在全局范围内不可见，因此无法从页面的img 元素的onclick 属性调用。

在 JavaScript 中，作用域位于函数级别。不在函数内的所有内容都会聚集到全局范围内。

Answer 4

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

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

var link = $(' <img src="' + image_data + '" />' ).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()，请像我一样将其包装在匿名函数中，否则将调用该函数，然后将返回值传递给单击操作。否则，无需传递参数，赋值就更简单了：

$(this).click( open_litebox );

Answer 6

我登陆此页面是因为我遇到了类似的问题，并且在 stackoverflow 上没有一篇文章实际上解决了这个问题。

花了将近半个小时试图解决这个问题这个问题的最佳解决方案让你的函数可以从 html onclick 触发是通过在外面的第一行定义一个变量然后使用该变量将函数存储在该变量中。

var myAlert;
$(document).ready(function(){
    myAlert = function(msg){
        alert(msg);
    }
}

实际问题的固定版本如下：

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);
  }
});

现在，当您使用 html onclick 调用它时，它会起作用

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