jquery事件處理鏈接

我開始使用jquery，並在官方網站上找到了教程。 http://docs.jquery.com/How_jQuery_Works#jQuery:_The_Basics jquery事件處理鏈接

我在標有文檔就緒啓動代碼的章節中。如果你注意到，他們提供了兩個例子。在將您帶到jQuery網站之前會彈出一個警告框，另一個警告框會阻止您前往該網站。

假設我想要兩個鏈接。一個出現警告框並點擊「確定」後會進入jquery的網站，另一個出現警告框但阻止您進入jquery的網站。我只想爲不同的鏈接找出不同的迴應。我需要給它某種類型的ID嗎？

這是代碼。

<!doctype html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
<title>Demo</title> 
    </head> 
    <body> 
<script src="jquery.js"></script><br/> 
<a href="http://jquery.com/" id="1">jQuery</a><br/> <!--first link: will display message and then proceed to site --> 
<script> 
$(document).ready(function(){ 
    $("a#1").click(function(event){ 
     alert("Thanks for visiting!"); 
    }); 
    }); 
</script> 
<a href="http://jquery.com/" id="2">jQuery</a> <!-- second link: message appears and does not continue to site --> 
<script> 
    $(document).ready(function(){ 
     $("a#2").click(function(event){ 
     alert("As you can see, the link no longer took you to jquery.com"); 
     event.preventDefault(); 
     }); 
    }); 
</script>

編輯 - 添加標識對錨。謝謝你們，它有效。

來源

2012-05-02 user1104854

是的，現在，您將'click（）'附加到頁面上的每個''標籤。你必須使用選擇器來定位你需要的''。這可以通過給予每個''一個單獨的類或id來完成。 – Nadh

是的，使用id是引用錨的最直接的方法。

<a id="anchor1" href="..">anchor 1</a>

允許

$("#anchor1").click(function(event){ 
    alert("Thanks for visiting!"); 
    event.preventDefault(); 
});

來源

2012-05-02 14:21:31

你應該結合您的活動時，一個ID，鏈接和參考確實分配給這個ID。有關工作示例，請參見此jsFiddle。

<a href="http://jquery.com/" id="link1">jQuery</a><br/> <!--first link: will display message and then proceed to site --> 
<a href="http://jquery.com/" id="link2">jQuery</a> <!-- second link: message appears and does not continue to site -->

然後綁定事件：

$(document).ready(function() { 
    $("#link1").click(function(event) { 
     alert("As you can see, the link no longer took you to jquery.com"); 
     event.preventDefault(); 
    }); 

    $("#link2").click(function(event) { 
     alert("Thanks for visiting!"); 
    }); 
});

來源

2012-05-02 14:26:13 marcok

很好的答案。我有一個小問題。您不應使用選擇器中的標記名限定id（「a＃link2」）。一個ID必須是唯一的，所以不需要限定它。另外，首先放置'a'會減慢查詢速度。 – hellslam

修正了，謝謝@hellslam！ – marcok

是的，$('a')選擇所有錨定元件（以下簡稱「A'-標籤）。如果你全部選擇它們，就像你沒有進一步指定選擇器一樣，事件處理程序將被掛鉤到所有它們。所以，你可以通過添加一個id，就像對方的回答說選擇不同的錨：

<a id="anchor1" href="..">anchor 1</a>

允許

$('#anchor1').click(...);

或者你可以通過使用一個標籤的其他屬性細化的選擇，像裁判屬性或數據 - *屬性，像這樣：

<a rel="preventme" href="..">anchor 1</a>

允許

$('a[rel="preventme"]').click(...);

和

<a data-mode="disable-link" href="..">anchor 2</a>

允許

$('a[data-mode="disable-link"]').click(...)

你甚至可以選擇通過他們的協議的所有外部鏈接，就像

$("a[href^='http://']").click(...);

來源

2012-05-02 14:29:33 David

這些選擇器非常棒（並且可能很有用），但它們可能會混淆更新的jQuery用戶。如果你包括一個使用ID選擇器的例子，我會upvote你:) – Ktash

增加了一個帶ID的例子，只是爲了完整性。這是最簡單的解決方案，並已在另一個答案中說明 – David

是。

現在，$('a')抓取頁面上所有元素，即<a>元素。你需要的是一種區分兩者的方法，只抓取其中一個元素。有很多方法可以做到這一點，但最簡單的方法是添加一個ID。 ID在頁面上扮演唯一標識的角色，操作和/或抓取單個元素。

從那裏，由@Sam Tyson的回答說，你可以使用下面的jQuery選擇：

$('#id1').click(

這個jQuery選擇器使用的ID id1，並與#它之前，它被用來告訴jQuery你正在尋找具有該ID的東西。

另一種方法是使用類。例如，如果您希望阻止頁面上的多個鏈接繼續到下一頁，則可以使用類名將它們組合在一起以同時處理它們。類與ID相對，用於對元素進行分組，以便可以對它們進行樣式化，操縱或一起抓取。添加一個類你的鏈接將允許你做到以下幾點：

$('.do_not_follow_link').click(function (e) { 
    e.preventDefault(); 
});

這將找到的類名do_not_follow_link所有鏈接，並持續到它們被鏈接到頁面阻止他們。

現在，使用jQuery的選擇器，有很多方法可以做到這一點，但這些是您現在應該擔心的重要方法。

來源

2012-05-02 14:30:09 Ktash

jquery事件處理鏈接

回答

相關問題