[MusikMixen]

Hello!

Har letat lite på google men hittar inte riktigt det jag behöver.
Jag öppnar en popup ruta med lyssna länkar i. Eftersom det finns en inbyggd mediaspelare i popup fönstret så hade det varit bra om rutan kunde stängas automatiskt när man klicka på en direkt lyssnalänk.

Vore tacksam för en kod eller länk till sida. Det handlar om 7 länkar sammanlagt i popup fönstret.

[jonssondesign]

Lägg in en klass på varje länk. Låt oss säga att klassen heter, linkre.

Sen skriver du jquery som kollar om du klickar på någon av länkarna/elementen som har klassen "linkre" i sig, och redirectar dig isåfall till en annan sida.:

$('.linkre').click(function() {
   window.location.replace("http://valfrisida.se");
});

[MusikMixen]

Ursprungligen postat av jonssondesign

Lägg in en klass på varje länk. Låt oss säga att klassen heter, linkre.

Sen skriver du jquery som kollar om du klickar på någon av länkarna/elementen som har klassen "linkre" i sig, och redirectar dig isåfall till en annan sida.:

$('.linkre').click(function() {
   window.location.replace("http://valfrisida.se");
});

Tack för ditt svar! Jag kör vanlig html i popup fönstret.

[jonssondesign]

Det antog jag också

Som sagt, lägg bara till en klass som heter linkre på varje länk som du vill ska redirecta till en ny sida, och sen lägger du in js koden vart du vill i din html kod, eller om du skapar en ny .js fil och inkluderar den i din html kod.

Exempel:

<a href=".." title="" class="linkre">...</a>

[MusikMixen]

Ursprungligen postat av jonssondesign

Det antog jag också

Som sagt, lägg bara till en klass som heter linkre på varje länk som du vill ska redirecta till en ny sida, och sen lägger du in js koden vart du vill i din html kod, eller om du skapar en ny .js fil och inkluderar den i din html kod.

Exempel:

<a href=".." title="" class="linkre">...</a>

Då är jag med, ska testa det. Tack för hjälpen!

[yakuzaemme]

Vill du även köra lite HTML5 (inte rekommenderat om dina besökare kör exempelvis IE 8 eller lägre) så kan du köra ditt egna data-attribut på varje länk, exempelvis:

<a href="#" class="linkre" data-url="www.example.com"/>Example.com</a>

Och sedan jQuery:

$("a.linkre").click(function() {
//Stäng popup här, exempelvis $(this).parent().hide();
window.location.replace($(this).data("url"));
});

Om sidan "hoppar" innan den stänger popup/redirectar, kör javascript:void(0) istället för # i anchor-elementet. Lycka till!

[Oscarip]

Bra initiativ boys, men känner att det går att förbättra koden lite.

Har inkluderat jQuery DOM ready så har du redan en sådan, klistra bara in själva clicket.

$(function(){
	$('a.linkre').on('click', function(){
		window.location.replace($(this).data('url'));
		return false;
	});

});

[jonssondesign]

Bra Oscar!

Men varför inte använda kortkommandot .click() istället för .on("click",)?

Jag anser att man skall försöka använda sig av .click() så ofta man kan på html elements som laddats in från början. Och ex. .live() på de elements som laddats in EFTER att DOM har laddats in. Däremot så kan .on() användas till andra saker, men om det finns ett kortkommando skapat för just klick events, varför inte använda det då?

[yakuzaemme]

Ursprungligen postat av jonssondesign

Bra Oscar!

Men varför inte använda kortkommandot .click() istället för .on("click",)?

Jag anser att man skall försöka använda sig av .click() så ofta man kan på html elements som laddats in från början. Och ex. .live() på de elements som laddats in EFTER att DOM har laddats in. Däremot så kan .on() användas till andra saker, men om det finns ett kortkommando skapat för just klick events, varför inte använda det då?

click är en funktion som egentligen använder on, och on har även samma funktionalitet som live. Dock ser jag ingen som helst anledning att binda den direkt till eventhanteraren (alltså on("click")) då det knappast kommer göra någon förbättring i detta fallet - dessutom så är det mycket enklare för en nybörjare att förstå click.

Sedan jQuery 1.7 tror jag även att båda laddas in i minnet ändå, och konverteringen från click till on("click") går snabbare än snabbast.


Ska vi ändå vara petiga ska du inte köra return false; i detta fall då det utför 3 olika "funktioner" (preventDefault, stopPropagation, och avbryter callback execution). Det enda som behövs i detta fall är preventDefault tillräckligt. Men somsagt, sjukt onödigt att vara så petig när det gäller en sida som denna.

[Alex]

Ska ni använda jQuery kan ni lika väl vara konsekventa och använda .on() överallt. click är en genväg. Precis som live() var till bind(). live() är nu deprecated och det kanske .click() blir i framtiden också. Det finns dessutom fler fördelar med att köra .on() framför click. Har du dynamiskt innehåll som laddas in till DOMen i efterhand så kan du även styra över det. Good practise att vara konsekvent.

yakuzaemme - FYI: Det spelar ingen roll vilken webbläsare det handlar om. Du kan ha vilka attribut på ett element du vill, och jQuery är tillräckligt smart för att plocka ut datan ur attributet på det sättet du har skrivit . Inte en HTML5-specifik implementation när det gäller jQuery. Snackar vi 'native' javascript är det en annan femma.