Momenteel probeer ik achter te halen hoe ik het best nieuw a href kan toevoegen wanneer men op een link klikt. Wat is het beste om dit te doen met Append() of html()? Iemand een paar voorbeelden?
Het is de bedoeling dat er ook daadwerkelijk nieuwe link (<a href="#" title=">my new link</a>) wordt toegevoegd, na het klikken op een link.
Dat hangt van wat je wilt.
Als je het wilt 'vervangen' dan gebruik je .html() daarmee kun je alle HTML in een object vervangen voor iets nieuws.
Wil je iets toevoegen, dan gebruik je append() Append voegt niets in een object als laatste toe. Wil je dat een link voor de HTML erbij komt, dan kun je prepend() gebruiken.
Na het lezen van je reactie en jQuery Documentation is het duidelijk dat ik het best append() kan gebruiken.
Toevoeging op 19/06/2014 15:59:12:
Ik heb net even geprobeerd om juiste code te schrijven en bij join wanneer je erop klikt, word er een link toegevoegd, wat goed is, maar echter, als ik dan weer op part wilt klikken, komt er geen melding van alert (Alert is even een test om te zien of het doet). Wat doe ik hier fout?
<script>
$(function() {
$( "#link" ).click(function() {
var channelCommand = $("a").attr("rel");
var channelName = $("a").attr("type");
if (channelCommand == 'join')
{
$( ".test" ).append("<a id='#link' href='#" + channelName + "' rel='part'>" + channelName + "</a>");
} else if (channelCommand == 'part') {
alert('Dit is Part Commando!');
}
});
});
</script>
<div class="test">
<a id="link" href="#Channel" rel="join" title="Channel" type="Channel">Join Channel</a>
</div>
Allereerst mag een id maar 1 keer voorkomen en moet je overstappen op bijv. class zodat je het vaker mag gebruiken.
Daarnaast werkt click niet met een LiveDomList. Dat betekend dat hij niet doorheeft dat hij ook moet werken op elementen die er later worden toegevoegd. Hij werkt alleen op de elementen die er zijn op het moment dat hij geregistreerd wordt.
Om dit op te lossen kun je 2 dingen doen: .on() gebruiken. Hiermee registreer je de listener op de parent (.test in dit geval) en zal die zodra je ergens in .test klikt gaan kijken of je misschien op een .link klikte of niet, zo ja => listener aanroepen en anders niks. Deze manier werkt dus ook met elementen die later worden toegevoegd.
Ook kun je de listener opslaan als een functie, die registreren op de huidige .link elementen en bij het toevoegen weer registreren op de .link elementen.
Als laatst wil ik je de tip geven om $('...') zo min mogelijk proberen uit te voeren. Nu moet javascript per klik je hele HTML code (DOM) doorzoeken opzoek naar het .test element. Je begrijpt dat dat voor onnodige vertraging zorgt. Zoek je het $('.test') element maar 1 keer op, dan kun je hem per klik gewoon hergebruiken.
Aaah, dank je voor je duidelijke en heldere uitleg!! Ik liep steeds vast, omdat ik elke keer te moeilijk dacht, ook al weet ik dat ik dat niet moet doen en dat het alleen goed lukt, als ik simpel bleef denken, maar dat is ook weer niet zo eenvoudig. Dankzij jouw uitleg ben ik weer op de goede weg met on() en function() en heb ik net even weer opnieuw code geschreven en dat werkte perfect naar behoren op een manier dat ik maar 1x $('.test') hoefde te gebruiken.
