Gestion des événements jquery pour les liens

Je commence avec jquery et suit le tutoriel sur le site officiel trouvé ici. http://docs.jquery.com/How_jQuery_Works#jQuery:_The_Basics Gestion des événements jquery pour les liens

Je suis dans la section intitulée Code de lancement sur document prêt. Si vous remarquez, ils fournissent deux exemples. Un où une boîte d'alerte apparaît avant de vous emmener sur le site de jquery, et une autre où une boîte d'alerte vous empêche d'aller sur le site. Supposons que je souhaite avoir deux liens.

Un où une boîte d'alerte apparaît et en cliquant sur "OK", il continue sur le site de jquery, et un autre qu'une boîte d'alerte apparaît mais vous empêche d'aller sur le site de jquery. J'aimerais juste pouvoir trouver différentes réponses pour différents liens. Ai-je besoin de lui donner une sorte d'identifiant?

Voici le code.

<!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>

modifier - id ajoutéEND_SPAN aux ancres. Merci les gars, ça fonctionne.

Source

2012-05-02 user1104854

Oui, en ce moment, vous joignez 'click()' à chaque balise '' sur la page. Vous devez cibler les '' dont vous avez besoin en utilisant des sélecteurs. Cela pourrait être fait en donnant à chaque '' une classe séparée, ou id. – Nadh

Oui, l'utilisation des identifiants est la manière la plus directe de référencer les ancrages.

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

permet

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

Source

2012-05-02 14:21:31

Vous devez en effet attribuer un identifiant aux liens et référence à cet identifiant lors de la liaison de vos événements. Voir ce jsFiddle pour un exemple de travail.

<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 -->

lient ensuite les événements:

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

Source

2012-05-02 14:26:13 marcok

Bonne réponse. J'ai un petit problème. Vous ne devez pas qualifier les identifiants avec des variables dans les sélecteurs ("a # link2"). Un identifiant doit être unique, il n'est donc pas nécessaire de le qualifier. En outre, placer le 'a' en premier ralentira la requête. – hellslam

Correction, merci @hellslam! – marcok

Oui, le $('a') sélectionne tous les éléments d'ancrage (les « A'-tags). Si vous les sélectionnez tous, comme vous l'avez fait sans spécifier davantage le sélecteur, le gestionnaire d'événements sera accroché à chacun d'entre eux. Ainsi, vous pouvez sélectionner différents points d'ancrage en ajoutant un identifiant, comme indiqué dans l'autre réponse:

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

permet

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

Ou vous pouvez affiner la sélection en utilisant d'autres attributs de l'une étiquette, comme l'arbitre attribut ou un attribut de Data- *, comme ceci:

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

permet

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

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

qui permet

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

Vous pouvez même sélectionner tous les liens externes par leur protocole, comme

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

Source

2012-05-02 14:29:33 David

Ces sélecteurs sont excellents (et peuvent être utiles), mais ils peuvent perturber les nouveaux utilisateurs de jQuery. Si vous incluez un exemple d'utilisation d'un sélecteur d'identifiant, je vais vous upvote :) – Ktash

a ajouté un exemple avec ID, juste pour être complet. C'est la solution la plus simple et a déjà été mentionnée dans une autre réponse – David

Oui.

En ce moment, $('a') saisit tous les éléments de la page qui sont <a> éléments. Ce dont vous avez besoin est un moyen de distinguer entre les deux pour ne saisir que l'un des éléments. Il y a plusieurs façons de le faire, mais le plus simple est de loin d'ajouter un identifiant. Les ID agissent comme des identifications uniques sur la page pour styliser, manipuler et/ou saisir des éléments individuels.

À partir de là, comme indiqué par la réponse de @Sam Tyson, vous pouvez utiliser le sélecteur jQuery suivant:

$('#id1').click(

Ce sélecteur jQuery utilise l'ID id1, et précède le #, qui est utilisé pour dire jQuery vous cherchez quelque chose avec cet ID.

Une autre façon d'y parvenir serait d'utiliser des classes. Si, par exemple, vous aviez plusieurs liens sur la page que vous souhaitiez empêcher de passer à la page suivante, vous pouvez utiliser un nom de classe pour les regrouper afin de les gérer tous en même temps. Les classes, par opposition aux ID, servent à regrouper les éléments afin qu'ils puissent être stylisés, manipulés ou saisis ensemble. Ajout d'une classe à vos liens vous permettra de faire ce qui suit:

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

Ce trouverait tous les liens avec le nom de la classe do_not_follow_link et les empêcher de continuer à la page qu'ils sont liés. Maintenant, en utilisant des sélecteurs avec jQuery, il y a beaucoup plus de façons de le faire, mais ce sont les plus importantes pour lesquelles vous devriez vous inquiéter pour le moment.

Source

2012-05-02 14:30:09 Ktash

Gestion des événements jquery pour les liens

Répondre

Questions connexes