我有一个简单的点击处理程序,它将提醒其链接的 href
,如下所示:
<a id="link" href="http://www.google.com">Google</a>
$('a#link').on('click', function() {
alert($(this).attr('href'));
});
我如何分离函数(以及如何调用它)以便它可以被另一个点击处理程序调用?
function showHref() {
/* What to do here because $(this) won't resolve to <a> anymore. */
}
// I'd like a#another-link to be able to call that same function above.
<a id="another-link" href="http://www.microsoft.com">Microsoft</a>
$('a#another-link').on('click', /* How to call showHref? */);
谢谢。
最佳答案
你可以这样做:
function showHref() {
alert($(this).attr('href'));
}
$('a#link').on('click', showHref);
$('a#another-link').on('click', showHref);
在这段代码中,showHref
中的 this
将 指向被点击的链接,因为 jQuery 确保被点击的链接是调用上下文(使用 .call()
,你可能想继续阅读)。但是,如果您要手动调用 showHref
,this
将不会引用您的链接。
如果你想要一个既可以手动调用又可以通过 jQuery 绑定(bind)的 showHref
的定义,将引用作为参数传递可能是最简洁的方法:
function showHref(link) {
alert($(link).attr('href'));
}
在这种情况下,您必须按如下方式调整您的监听器:
$('a#link').on('click', function() {
showHref(this);
});
但也可以组合选择器:
$('a#link, a#another-link').on('click', function() {
alert($(this).attr('href'));
});
关于javascript - 独立的事件处理程序以实现可重用性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10409967/