2013-05-07 16 views
15

Próbuję utworzyć łącze, które po kliknięciu przełącza jego atrybut href, a następnie przechodzi do tej lokalizacji.Zmiana linków href po kliknięciu z jQuery

Moje html jest:

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

Po kliknięciu Chciałbym przeglądarkę, aby przejść do lokalizacji danych wpurl, nie href lokalizacji. Powód, dla którego używam atrybutu danych wynika z tego, że aplikacja, której używam, wymaga użycia href ... nie dotyczy tutaj.

Moje jQuery jest:

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

Używam e.preventDefault(); aby uniemożliwić przeglądarce przejęcie użytkownika do href. Po przypisaniu atrybutu danych do href, w jaki sposób wywołać kliknięcie? Używanie trigger('click') i nie działa!

Wszelkie pomysły?

+0

Można to zrobić, ale tylko ciekawi sprawy użycia ... – Ejaz

+0

Potrzebuję href do wszystkiego oprócz mobilnego ... Tak więc w moim js używam warunkowego. Chcę, aby link uruchamiał różne adresy URL na podstawie rozmiaru ekranu. – JCHASE11

Odpowiedz

16

Byłoby łatwiej po prostu natychmiast zmienić lokalizację:

e.preventDefault(); 
location.href = $(this).data('wpurl'); 
+1

to. jeśli zamierzasz przenieść użytkownika na nową stronę, nie ma powodu, aby faktycznie aktualizować href łącza. – sgroves

6

Użyj onmousedown. Google korzysta z tej metody na stronie wyników wyszukiwania, aby śledzić kliknięcia. Jeśli chcesz zobaczyć, gdzie pojawi się link, kliknij prawym przyciskiem myszy zamiast lewej. Obydwa wywołują zdarzenie, które się zakończyło.

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

myślę oryginalny jQuery jest w porządku, z wyjątkiem e.preventDefault(): to będzie zatrzymać odpalenie zdarzenia, bez względu na to, co zrobić, aby atrybutu href po tym punkcie.

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

Wszystkie powyższe kody zostaną wykonane przed odświeżeniem strony.

15

podobne rozwiązanie, ale bez konieczności wywoływania e.preventDefault()

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

z mojego punktu widzenia, jest to bardziej ogólnie, czystsze rozwiązanie, ponieważ nie będzie to zmienić domyślne zachowanie przeglądarki (np: gdy użytkownik klika za pomocą kółka myszki na łączu, z rozwiązaniem Jacks nie otwiera się nowa zakładka)

+0

Dziękuję za to. To była najbardziej czytelna i najprostsza wyjaśniona odpowiedź. –

Powiązane problemy