live() når ready ?

24. juli 2011

Hei,

Har et spørsmål. Er det umulig å bruke jquery .live() når et element er klar? Se for deg følgende svenario: En rekke elementer lages dynamisk, live-funksjonen trenger en event for å holde disse elementene "live", denne eventen kan være click,mousemove,moseover,mousedown osv... men hva hvis man vil at elementene skal holde seg "live" med engang de lages dynamisk? Er det noe som er mulig?

Også et spørsmål til. Er mine spørsmål for komplisert m.t.p at det er sjeldent jeg får svar, eller er det jeg som er såpass utydlig?

nso

popålol

Administrator

6.159 5.592

24. juli 2011

Du er såpass utydelig. Prøv igjen.

CT705

Trådstarter

218 325

24. juli 2011

Takk.

La oss si jeg har en rekke span-elementer med unike id.

HTML-kode

<span id="i-1">tekst  </span>
<span id="i-2">tekst 2</span>
<span id="i-3">tekst 3</span>
<span id="i-4">tekst 4</span>

Og la oss si at disse span-elementene lages dynamisk ved hjelp av:

HTML-kode

<button>Klikk her for å lage span</button>

Det er nå slik at når noe lages dynamisk i jquery (når DOM forandres), må man bruke jquery live() funksjonen for å kunne velge disse elementene.

Problemet naturligvis er at jquerys live() opperer med en event. F.eks:

Kode

$("span#1").live({
     mouseover:function(){//gjør noe},
     mouseout:function(){//gjø noe annet}
});

Grunnen til at det er et problem, er om du bruker disse elementene uten en spesifikt event. La oss si du vil at disse elementene skal være droppable (at du kan droppe noe (en draggable) på disse elementene. For at man skal kunne klassifisere disse elementene som droppable må man naturligvis bruke live(), men problemet er at du kan ikke klassifisere element som droppable med engang de lages, du må ha en event. Er det ingen omvei her, hvor vi kan definere elementene som droppable med engang de lages?

z0p

uʍop ǝpısdn

3.814 906

24. juli 2011

live vil påvirke alle eleemnter som matcher selectoren, eksisterende ved kall eller ikke. Man kan velge DOM-elementer og sette eventhandlere på vanligvis om de er lagt til dynamisk eller ei

altså vil $('span').live(args) matche alle span elementer som er i DOM når funksjonen kjører, og den vil matche alle span som settes inn dynamisk etter at funksjonen er kjørt. Ergo kan du kjøre live før du setter inn noe i DOM, og klassifisere de slik at du kan velge ønskede elementer med en selektor. Alternativet er å velge de etter at de er lagt til i DOM, og bruke bind-funksjonen.

CT705

Trådstarter

218 325

25. juli 2011

Så du mener jeg kan

Kode

$( "#table span" ).live(
	function(){
                        $(this).droppable({ });
        }
);

Men det gir ingen respons. Er jeg en komplett idiot eller?

akselsm

129 94

25. juli 2011

Kan du ikke bare sette elementet som droppable idet du legger det til i DOM-en? Det gir vel ingen mening å først legge det til i DOM, fyre av en event som eventlisteneren til live() plukker opp, og så traversere gjennom DOM-en og finne igjen elementet?

Altså av type

Kode

$('button').click(function(){
    idvariabel = blapp; //hvordan du nå velger å løse dette er forsåvidt opp til deg
    $('#table').append('<tr><td><span id="i-'+idvariabel+'">Lolcats</span></td></tr>');
    $('#table span').droppable();
});

eller har jeg misforstått? Du har jo kontroll på når du legger til ting i DOM, og hvis du er usikker kan du jo kjøre .droppable() litt for ofte, det skader jo ikke (altfor mye)?

Sist endret av akselsm; 25. juli 2011 kl. 02:14.

CT705

Trådstarter

218 325

25. juli 2011

Sitat av akselsm

Kode

$('button').click(function(){
    idvariabel = blapp; //hvordan du nå velger å løse dette er forsåvidt opp til deg
    $('#table').append('<tr><td><span id="i-'+idvariabel+'">Lolcats</span></td></tr>');
    $('#table span').droppable();
});

eller har jeg misforstått? Du har jo kontroll på når du legger til ting i DOM, og hvis du er usikker kan du jo kjøre .droppable() litt for ofte, det skader jo ikke (altfor mye)?

Vis hele sitatet...

Finnes det absolutt ingen enklere løsning, jeg føler det blir mye droppable request. Jeg hater rotete koding

Det blir da slik at jeg må deklarere droppable hver eneste gang elementene forandres/adderes i DOM. Mulig det er jeg som er paranoid, men vil ikke det føre til dårligere funksjonalitet og derfor lengere nedlastningstid..?

z0p

uʍop ǝpısdn

3.814 906

25. juli 2011

du må fortelle hva den skal trigge på ved .live( eventType, handler ) eller .live( events )

Kode

$( ".selector" ).live( "eventType", function(){} );
$( ".selector" ).live( {"eventType: function(){} });

Uansett er ikke droppable/draggable en event som kan bindes, men en funksjon gitt "til" objektet og tilegner objektet egenskapen/funksjonaliteten. dragstart, dragstop, drag osv. derimot er events som blir trigget av objekter med den tilknytningen.
Den enkleste og beste løsningen er nok å gjøre dette når du oppretter elementene for å unngå unødvendig gjennomgang av hele "#table span"-selektor-køen hver gang et nytt element skal opprettes. Dette er fult mulig, å lenge koden er korrekt.

Du kan derimot benytte live-funksjonen på drop/drag events med "#table span"-selektoren for å sikre at alle spans takler disse events.

Sitat av CT705

Finnes det absolutt ingen enklere løsning, jeg føler det blir mye droppable request. Jeg hater rotete koding

Vis hele sitatet...

Det krever ikke mer koding. Stort sett bare omorganisering av koden om koden er god fra før. Jeg regner med at du en kodesnutt for hvert element du oppretter?

Koden blir ihvertfall ikke dårligere, i værste fall bedre, men forskjellen er nok heller ørliten.