return false Web-utvikling

21. juli 2011

Gitt;

HTML-kode

<span id='forste'>
     <span id='andre'>
          <span id='tredje'>
          
          </span>
     </span>
</span>

Gitt alle elementeme skapes dynamisk og er klikkbare som følge av

Kode

 $("span id='et av de ovennevnte').live('click',function(){//gjør noe});

Slik jeg har lest dokumentasjonen, klarer ikke jquerys .live(); å hindre klikk på de to andre elementene som man ikke klikker på. Det fører til en opphopning, slik at når du trykker på id='tredje' trykker du også på id='forste' og id='andre'. Mange har foreslått event.stopproPagation(); eller preventDefault(); eller return false; men ingen av disse fungerer når elementet lages dynamisk. Har jeg forstått det riktig?

Isåfall, hva vil den enkleste omveien være her?

Det første som kommer inni hodet mitt er å binde flere event sammen i livefunksjonen, og ved mousedown deklarere et global boolean, ikke utfør de klikkene dersom boolean er lik 0 ved å deklarere en enkel if-statement.

Mange takk på forhånd.

ma10as

990 198

28. juli 2011

Når man klikker på et child-element er det jo logisk at også parent-elementet blir berørt. Jeg ville heller sett på den logiske oppbygningen av markup. Når det er sagt fungerer return false for meg, i dette eksempelet:

Kode

$(function(){
	
	// Tegn opp trestruktur dynamisk
	$('body').append('\
		<span id="forste">\
			<span id="andre">\
				<span id="tredje">x</span>\
			</span>\
		</span>\
	');
	
	$('#forste').click(function() {
		alert('forste');
	});
	
	$('#tredje').click(function() {
		alert('tredje');
		return false;
	});

Her får jeg kun en alertboks, med teksten "tredje".
Tar jeg bort return false vil jeg få to alert-bokser, for både "tredje" og "første"

CT705

Trådstarter

218 325

28. juli 2011

Hei ma10as, det stemmer det du skriver, men det stemmer ikke for live-funksjonen (når elementene skapes dynamisk). return false er både preventDefault(); og stopproPagation(); men responderer likevel ikke for en live-funksjon. Jeg har lest mye frem og tilbake på internett, men endte opp med min egen løsning hvor jeg definerer variabler og sjekker om disse eksisterer for så å utføre en handling.

Sist endret av CT705; 28. juli 2011 kl. 12:23.

marfo

390 44

28. juli 2011

Har du prøvd "delegate"?

Ta en titt på dette eksempelet: http://jsfiddle.net/3LKHQ/
(Logger til konsollen, så åpne den før du klikker. evt. endre console.log til alert)

OG! Hvilken versjon jQuery bruker du?

Det heter forresten "stopPropagation()", ikke "stopproPagation()"

Har endret litt på eksempelet: http://jsfiddle.net/3LKHQ/1/

CT705

Trådstarter

218 325

28. juli 2011

Heftig marfo, men jeg er redd det er deler av koden jeg ikke helt forstår (jeg er ny i jquery).

Kode

for (; i < len; i++) {
    parent = jQuery('<span />', {
        id: id[i],
        html: id[i],
        css: {
            background: '#' + Math.floor(Math.random() * 16777215).toString(16)
        }
    }).appendTo(parent);

Jeg skjønner at du lager en loop for antall span-elementer, men så stopper det opp. Hadde vært takknemlig med litt veiledning, evt kilder jeg kan lese på. Mange takk.

marfo

390 44

28. juli 2011

Den beste kilden til jQuery er http://api.jquery.com/, les og prøv deg frem

Har lagd et nytt og enklere script med kommentarer for nesten hver linje: http://jsfiddle.net/rA7WZ/

Håper det hjelper