[js] meerdere onclick events

[Ronaldude]

Ik zit met een probleem. Heb een prachtig stukje code dat via ajax gegevens controleert. De php pagina die dit doet spuugt true of false terug. Bij true zet in een onclick event voor een span tag:

code:

document.getElementById('span_1').onclick = function() { 
showMelding('dit is de melding'); 
};

Hierbij zijn de melding en het id voor de span natuurlijk dynamisch. DIt werkt prima, totdat ik bij een volgende span dit doe:

code:

document.getElementById('span_2').onclick = function() { 
showMelding('dit is melding 2'); 
};

De melding bij de eerste span wordt nu ook "dit is melding 2".

Ik kan me voorstellen dat ik de gemaakte functie bij 1 'overschrijf' met de tweede span, maar kan er geen oplossing voor bedenken.

Someone?

[ Voor 2% gewijzigd door Ronaldude op 12-01-2008 15:21 . Reden: Even wat overzichtelijker gemaakt... ]

[zwippie]

Wat doet showMelding() precies?

[chem]

Wat je zoekt zijn event-listeners. Je bent nu op de 'oude' manier (DOM Events level 0) event aan het registreren; als je de nieuwe (DOM Events level 2) gebruikt, dan kan je zoveel events als je wil aan een element hangen. Bijkomende voordeel is dat je code netter wordt - het helpt je om geen onclick in je html te zetten, maar alles in je JS-code af te handelen.

http://dean.edwards.name/weblog/2005/10/add-event2/ kan je wellicht hierbij helpen.

[Ronaldude]

zwippie schreef op zaterdag 12 januari 2008 @ 15:23:
Wat doet showMelding() precies?

Niks speciaals, op dit moment de melding alerten...

[Verwijderd]

Ronaldude schreef op zaterdag 12 januari 2008 @ 15:19:
Ik kan me voorstellen dat ik de gemaakte functie bij 1 'overschrijf' met de tweede span, maar kan er geen oplossing voor bedenken.

Als dit je code is kan ik me dat eigenlijk niet voorstellen. Kun je eens wat meer code plaatsen? Het liefts een kleine (maar volledige) testcase waarbij het al mis gaat.

[zwippie]

Ronaldude schreef op zaterdag 12 januari 2008 @ 17:04:
[...]

Niks speciaals, op dit moment de melding alerten...

Ok, maar daar kan alsnog wat misgaan natuurlijk. Meer code, please!

[crisp]

chem schreef op zaterdag 12 januari 2008 @ 16:09:
Wat je zoekt zijn event-listeners.

[...]

Even ter aanvulling: er zijn heel veel verschillende event-libraries in omloop aangezien bijvoorbeeld IE nog steeds geen DOM level 2 events ondersteund maar een eigen proprietary implementatie heeft. Veel libraries zijn pure wrappers om IE's eventmodel heen (attachEvent).

Het probleem met attachEvent is dat de executie-volgorde niet 'FAFE' (First Assigned First Executed) is maar in de praktijk LAFE lijkt te zijn (dat is een observatie aangezien de technische details natuurlijk alleen bij MS bekent zijn).

Daarbij moet ook opgemerkt worden dat executie-volgorde in DOM level 2 events ook ongedefinieerd is (maar in de praktijk in alle browsers wel 'FAFE' is).

Je zou dus ook kunnen opteren voor een eigen 'stack' die de functie-references bijhoudt en een enkele onclick die gewoon die stack afloopt (in de juiste volgorde). Dat laatste is overigens ook wat Dean's (en een beetje mijn ) addEvent() doet voor IE.

edit: en dan moet ik natuurlijk wel goed lezen Als je code een anonieme functie aan een handler op een element toekent dan zal dat niet zomaar die van een ander element overschrijven. Ik denk dan ook dat je voorbeeldcode niet de werkelijke code weerspiegeld maar dat je ergens een referentie naar een global of een scoped variabele in een closure hebt die telkens hergebruikt wordt.

[ Voor 14% gewijzigd door crisp op 12-01-2008 21:33 ]

[Ronaldude]

Ik heb het nu zo opgelost:

code:

    try {
        document.getElementById(span_id).addEventListener('click', function () { showMelding(melding); }, false);
    } catch(e) {
        if(document.attachEvent) {
            document.getElementById(span_id).attachEvent('onclick', function () { showMelding(melding); });
        } else {
            document.getElementById(span_id).onclick = function () { showMelding(melding); };
        }
    }

Zo werkt het wel.

Reactie op de laatste reactie: Toch is dat wat gebeurde. Als de onclick bijvoorbeeld 6 keer was gezet, hadden alle 6 de span's dezelfde melding bij klikken. addEventListener is de oplossing!

Oja, de inhoud van showMelding (komtie dan he):

code:

function showMelding(melding) {    
    alert(melding);
}

Voornamelijk om er later eventueel nog een floating divje van te maken

Thanks all!

[f.v.b]

Ronaldude schreef op zaterdag 12 januari 2008 @ 22:51:
Ik heb het nu zo opgelost:

code:

    document.getElementById(span_id).addEventListener(
        'click', function () { showMelding(melding); }, false
    );

Aha, daar zit dus de denkfout.

Je gebruikt in bovenstaande code de variabele 'melding'. Elke keer als je die variable wijzigt, overschrijf je ook de eerdere waardes. Alle onclick handlers gaan vervolgens die laatste waarde van de variabele 'melding' gebruiken.

De juiste aanroep zou zijn (niet getest overigens):

code:

    document.getElementById(span_id).addEventListener(
        'click', function () { showMelding('Dit is de melding'); }, false
    );

Aan jou de taak om de string die je aan showMelding meegeeft dynamisch (maar niet globaal) te maken. Dat kan, maar die code heb ik ook niet zo 1-2-3 paraat.

Succes!

[Verwijderd]

Ronaldude, dit artikel beschrijft precies jouw probleem met oplossing:
JavaScript closures in for-loops

[f.v.b]

Verwijderd schreef op zondag 13 januari 2008 @ 01:20:
Ronaldude, dit artikel beschrijft precies jouw probleem met oplossing:
JavaScript closures in for-loops

Oei, dat ziet er niet eenvoudig uit.

Zelf zou ik dat op de volgende manier oplossen (en natuurlijk weer niet getest):

code:

var clickfunc = new Function('showMelding("' + melding + '");');
document.getElementById(span_id).addEventListener(
        'click', clickfunc, false
);

Let erop dat er bij het definieren van de functie clickfunc er zowel enkele (') als dubbele (") quotes gebruikt worden. Wat er gebeurt is dit:

code:

'showMelding("' + melding + '");' -> showMelding("dit is de melding");

De variabele clickfunc kun je natuurlijk wegoptimaliseren maar dat komt de leesbaarheid niet ten goede. Omdat die functie op drie plekken gebruikt wordt, zou ik 'm toch eerst aan een variabele toekennen.

[Ronaldude]

Bedankt voor de replies nog, maar ik heb het al opgelost zoals hierboven beschreven
De try catch zorgt ervoor dat het script ook in oudere browsers werkt!

f.v.b , wat jij reageert dacht ik dus ook! Maar het onClick vervangen door addEventListener is al de oplossing. Schijnbaar wordt de variabele melding dan echt toegewezen aan het element...