在onclick事件中不调用的函数

我想在每个youtube链接的末尾添加一些HTML以在litebox中打开播放器。这是到目前为止我的代码：在onclick事件中不调用的函数

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

它的工作原理到它注入一些HTML YouTube的链接后，像这样的地步：

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

但是当我点击这个open_litebox()功能不打电话。查看错误控制台，我可以看到一个错误，说open_litebox is not defined，但我已经定义了它。

我对这里出了什么问题很无能，有人能帮我一把吗？

谢谢。

来源

2010-11-22 Wen

这是您第一次使用jQuery时的常见问题。这里的问题是，你已经定义了jQuery范围内的函数，这意味着它不能像调用普通函数那样调用它。一个解决问题的方法是将你的函数定义，你写的匿名准备功能外，像这样：

$(document).ready(function() { 

    // do your stuff here 

}); 

// define your functions here 
function my_func() { 

}

哦，我建议做同样为你定义了你的变量。将它们移动到您的预备功能之外，因为您将遇到与您的功能相同的问题。

来源

2010-11-22 05:34:25

**很多**对**没有更好**使全局函数，并与现代事件处理挂钩，而不是'onxyz'属性处理程序。 – 2017-08-14 10:14:12

您的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之后的独立通话）。

来源

2010-11-22 05:36:38

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

您可以移动功能的document.ready之外，或修改代码使用jQuery（引用直接的功能）来连接onclick处理程序：

var link = $(' <img src="' + image_data + '" />').click(function() { 
    open_litebox('hi'); 
}); 
$(this).after(link);

来源

2010-11-22 05:37:36

有一个更整洁，更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);

来源

2010-11-22 05:42:49

其他的答案都在你的移动申报my_func正确的$(document).ready()外将解决你的问题，但我想澄清的理由，因为它与jQuery无关。

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

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

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

来源

2010-11-22 05:49:39

在onclick事件中不调用的函数

回答

相关问题