Intercepter tous les liens actuels et futurs

Question

Je me demande simplement s'il existe un moyen avec jquery d'intercepter un lien quand on clique dessus. Le problème est que certains des liens sur ma page ne sont pas chargés lors du premier chargement de la page. Je me souviens vaguement avoir entendu que jquery avait le moyen d'intercepter tous les liens actuels et futurs. Voici le code que j'ai. Il fonctionne sur tous les liens il y avait là au début, mais les liens qui ont été chargés sur la page plus tard ne reçoivent pas intercepté par cette fonction

$('a').trackClick({ 
     areaClick: function(element) { return getAreaClicked(element); }, 
     href: function(element) { return getHrefFromElement(element); }, 
     text: function(element) { return getTextFromElement(element); }, 
     exceptions: function(element) { return isException(element); } 
    }); 

Answer 1

Vous avez besoin jquery voir en direct ici: http://api.jquery.com/live/

$('a').live('click', function(e){ 

var element = $(this); 
var data = {areaClick: function(element) { return getAreaClicked(element); }, 
      href: function(element) { return getHrefFromElement(element); }, 
      text: function(element) { return getTextFromElement(element); }, 
      exceptions: function(element) { return isException(element); } 
} 
    trackClick(data); 

    }); 

Answer 2

Utilisez le gestionnaire d'événements de live jQuery:

$('a').live('click', function() { 
    ... 
}); 

Answer 3

[edit: je reçois le upvote de temps en temps sur cette réponse, donc je voulais le mettre à jour avec plus de courant (en mai 2015) pratique]:

Par ma réponse originale, déléguer l'auditeur est une meilleure pratique. La syntaxe actuelle de «meilleure pratique» pour jQuery est .on(). Il ne diffère que dans l'ordre, et pour moi est plus intuitive sémantiquement:

$('#parent').on('click', 'a', function(event) { 
    event.preventDefault(); 
    // do the rest of your stuff 
} 

Le reste de ma première réponse est toujours valable.

---

Si vous ne voulez pas le comportement de clic par défaut, vous devez également arrêter le bouillonnement d'événement. Je préfère déléguer en direct, alors voici ma suggestion:

$('#parent').delegate('a', 'click', function(event) { 
    event.preventDefault(); 
    // do the rest of your stuff 
}); 

Le "#parent" est juste un échantillon. Vous utiliseriez n'importe quel sélecteur approprié qui sera un ancêtre permanent de vos balises d'ancrage. Pourrait même monter aussi haut que "corps", mais souvent un ID de wrapper de quelque description fonctionne aussi bien.

[edit: J'ai récemment vu une critique, ce qui signifie que cette réponse est vue par quelqu'un là-bas. Il convient de noter que .live() est maintenant dépréciée, et bien que .delegate() est prise en charge, la syntaxe proposée officiellement est .on() utilisé comme délégant:

$('#parent').on('click', 'a', function(event) { 
    event.preventDefault(); 
    // do the rest of your stuff 
}); 

Answer 4

L'option la plus simple est d'utiliser la méthode live() de jQuery, bien que ce soit assez cher. Si possible, delegate() est une meilleure option, et il y a des postes couple ici qui décrivent la différence entre les deux:

Jquery live() vs delegate()
jQuery: live() vs delegate()

En général, la meilleure option est de lier simplement tout ce que vous devez au nouveaux éléments <a> chargés via AJAX. Par exemple:

$.ajax({ 
    url: 'http://example.com' 
    type: 'GET' 
    data: 'whatever' 
    success: function(data){ 
     //after inserting the response somewhere... 
     $('.insertedContent').find('a'.trackClick({ 
     areaClick: function(element) { return getAreaClicked(element); }, 
     href: function(element) { return getHrefFromElement(element); }, 
     text: function(element) { return getTextFromElement(element); }, 
     exceptions: function(element) { return isException(element); } 
     }); 
    } 
} 

Answer 5

Comme il a été dit, les réponses et .delegate().live() recommandent sont out of date. J'ai eu un problème similaire: j'avais déjà plusieurs gestionnaires de clics en jeu sur différents éléments, mais je voulais ajouter un gestionnaire de clics supplémentaire pour tout attraper et éventuellement agir avant les autres.Mon cas d'utilisation pour cela voulait que divers outils dans une application Web «réinitialiser» à l'état par défaut lorsque d'autres outils ont été cliqués.

Voici ma solution ...

$(document).on("click", function(e){ 
    // This catches all clicks. 
    // It can be suppressed if the target uses e.stopPropagation() 
}); 

// To start the bubbling from an element "higher" than the document, 
// then use delegation, e.g.: 
// $(document).on("click", ".your_class", function(e){ etc }) 
// This can be really useful if you only have one sensitive area in the layout, 
// or you want different "master" click behaviours for different areas! 

$("#my_element").on("click", function(e){ 
    // prevent the default action, e.g. prevent "#" navigation on <a href="#"> 
    e.preventDefault(); 
    // prevent the click bubbling to the $(document) handler 
    e.stopPropagation(); 
    // now do my stuff 
    // ... 
}); 

$("#my_other_element").on("click", function(e){ 
    // prevent the default action, e.g. prevent "#" navigation on <a href="#"> 
    e.preventDefault(); 
    // this time I want the "catch all" to fire 
    // so I don't do stopPropagation() 
    // now do my stuff 
    // ... 
});