2012-05-02 44 views
1

我有一个简单的点击处理程序会提醒其链接的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? */); 

谢谢。

回答

1

你可以做这样的事情:

function showHref() { 
    alert($(this).attr('href')); 
} 

$('a#link').on('click', showHref); 
$('a#another-link').on('click', showHref); 

在这段代码,this内被点击的showHref参考链接,因为jQuery的可以确保被点击的链接调用上下文(使用.call(),你可能想阅读)。但是,如果您要手动拨打showHref,this而不是请参阅您的链接。

如果你想的showHref的定义,你可以两个手动调用,并通过绑定jQuery的,它很可能是最巧妙的传递引用作为参数:

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')); 
}); 
+0

它当然应该是'this.href',而不是'$(this).attr('href')',虽然;-) – Alnitak

+1

@Alnitak:我通常不介意jQuery往返。 'this.className'适用于某些浏览器,而不适用于其他浏览器,'$(this).attr('class')'适用于所有。对我而言,jQuery的最大好处是不必处理不同的浏览器实现。在我看来,特定属性“href”在主流浏览器中的行为没有出现任何这种不一致的情况并不是一个非常有说服力的理由。 –

1

你可以把功能逻辑到这样一个参考:

var handler = function() { 
    alert($(this).attr('href')); 
}; 

然后你就可以使用该引用来初始化事件侦听器:

$('#link').on('click', handler); 

当然,你可以重复使用。

$('#some_other_link').on('click', handler); 

或者调用自己的事件处理程序上下文之外(其中,如果你塑造的事件处理函数通常是没有意义的---但它可以用lambda表达式一般来完成)。

handler(); 

但是,如果您只想触发元素上的事件,则应该调用相应的事件触发器函数。

$('#link').click(); 
// or 
$('#link').trigger('click'); 
+0

手动调用'handler()'不会像写入的那样引用被点击的链接作为其this关键字,因此将不起作用。 –

+0

@David〜确实如此。不同的用途,不同的方法。 –

+0

@David〜woops,对不起,当我回答这个问题时,OP还没有进一步澄清这个问题。让我编辑它。详细解释请参阅 –

0

您写道:

function showHref() { 
    /* What to do here because $(this) won't resolve to <a> anymore. */ 
} 

嗯,其实,是的,它会的。这正是DOM事件所做的承诺,也是jQuery注册的事件处理程序。

FWIW,内容应该仅仅是:

alert(this.href) 

真的没有必要调用jQuery的目的只是为了让元素的href属性。