2012-05-02 77 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屬性。