web-dev-qa-db-fra.com

Modification d'un href de liens après clic avec jQuery

J'essaie de créer un lien qui, lorsqu'il est cliqué sur, change son attribut href, puis se rend à cet emplacement.

Mon html est:

<a href="http://google.com" rel="group" data-wpurl="http://yahoo.com"></a>

Lorsque vous cliquez dessus, j'aimerais que le navigateur se rende à l'emplacement data-wpurl, pas à l'emplacement href. La raison pour laquelle j'utilise un attribut de données est due à l'application que j'utilise nécessite l'utilisation du href ... non pertinent ici.

Ma jQuery est:

$('a[rel="group"]').on('click', function(e) {
      e.preventDefault();
      var wpurl = $(this).attr("data-wpurl");
      $(this).attr('href', wpurl);
});

J'utilise e.preventDefault (); pour empêcher le navigateur de conduire l'utilisateur vers le href. Une fois que l'attribut de données est affecté à la href, comment puis-je déclencher un clic? L'utilisation de trigger('click') et click(); ne fonctionne pas!

Des idées?

jqueryattributes
18
JCHASE11

Il serait plus facile de modifier immédiatement l'emplacement:

e.preventDefault();
location.href = $(this).data('wpurl');
17
Ja͢ck

Solution similaire, mais sans avoir besoin d'appeler e.preventDefault()

$('a[rel="group"]').on('click', function(e) {
    e.originalEvent.currentTarget.href = $(this).data('wpurl');
});

de mon point de vue, il s'agit d'une solution plus générale et plus propre, car cela ne changera pas le comportement du navigateur par défaut (par exemple: lorsque l'utilisateur clique avec la molette de la souris sur le lien, avec la solution Jacks, aucun nouvel onglet ne sera ouvert)

23
Gerwald

Utilisez onmousedown. Google utilise cette méthode sur sa page de résultats de recherche pour suivre ce sur quoi vous avez cliqué. Si vous voulez voir où le lien ira, faites un clic droit au lieu de gauche. Ils déclenchent tous les deux l'événement onmousedown.

http://jsfiddle.net/afLE3/

<a href="http://google.com" data-wpurl="http://yahoo.com" onmousedown="rwt(this)">CLICK HERE</a>

<script type="text/javascript">
  rwt = function(e){
    e.href = $(e).data('wpurl');
  }
</script>
8
Dan

Je pense que votre jQuery d'origine est très bien, à l'exception de e.preventDefault (): cela arrêtera le déclenchement de l'événement, peu importe ce que vous faites à l'attribut href après ce point.

$('a[rel="group"]').on('click', function(e) {
      var wpurl = $(this).attr("data-wpurl");
      $(this).attr('href', wpurl);
});

Tout le code ci-dessus s'exécutera avant l'actualisation de la page.

5
Ross Angus