[javascript] event handler

[Meijuh]

Ik probeer aan alle <select> elementen een onchange functie te hangen met JQuery, ik doe het volgende.

code:

var selects = $("#searchForm > select");
    for(var j in selects) {
        selects[j].change(function() {
            alert('foo');
        });
    }

searchForm is dus een formulier.

Firebug geeft de foutmelding "selects[j].change is not a function".

Ik zie zo niet wat ik fout doe, hoe kan ik die onchange eraan hangen?

[crisp]

'on' ervoor zetten:

select.onchange = functionref;

Gebruik overigens liever niet for-in voor arrays of collections

[ Voor 87% gewijzigd door crisp op 09-02-2010 23:15 ]

[jurp5]

JavaScript:

var selects = $("#searchForm > select");
    selects.each(function() {
        $(this).change(function() {
            alert('foo');
        });
    });

Beter nog:

JavaScript:

var selects = $("#searchForm > select");
    selects.change(function() {
            alert('foo');
        });

Doet precies hetzelfde in jquery

[ Voor 39% gewijzigd door jurp5 op 09-02-2010 23:15 ]

[jurp5]

crisp schreef op dinsdag 09 februari 2010 @ 23:11:
'on' ervoor zetten:

select.onchange = functionref;

Bij jquery heb je de function change(), die werkt alleen op jquery objecten, dus niet op standaard DOM elementen

[crisp]

jurp5 schreef op dinsdag 09 februari 2010 @ 23:16:
[...]


Bij jquery heb je de function change(), die werkt alleen op jquery objecten, dus niet op standaard DOM elementen

mja, jQuery is vage voodoo (zoals je tweede voorbeeld duidelijk laat zien; zoiets komt niet in mij op als zijnde 'logisch' maar ja). Ik ging er van uit (onterecht blijkbaar) dat een selector-query gewoon een array/collection van element-referenties terug zou geven...

[Meijuh]

jurp5 schreef op dinsdag 09 februari 2010 @ 23:16:
[...]


Bij jquery heb je de function change(), die werkt alleen op jquery objecten, dus niet op standaard DOM elementen

Dat was dus het probleem blijkbaar, ik heb het opgelost door toch each te gebruiken

[jurp5]

crisp schreef op dinsdag 09 februari 2010 @ 23:18:
[...]

mja, jQuery is vage voodoo (zoals je tweede voorbeeld duidelijk laat zien; zoiets komt niet in mij op als zijnde 'logisch' maar ja). Ik ging er van uit (onterecht blijkbaar) dat een selector-query gewoon een array/collection van element-referenties terug zou geven...

De selector query geeft ook een soort van array terug, maar dan zijn daar alle jQuery functies op mogelijk (word dus extended met die functies).
jQuery is inderdaad wat vaag, ik gebruik zelf liever ook Prototype.js, maar de ontwikkeling daarvan ligt wat stil.
(Als ik tijd heb misschien ooit nog wel een eigen library )

@TS:

zonder die each is iets sneller, maar zal je niet veel van merken, maar toch zou ik dat 2e voorbeeld eerder gebruiken.

[ Voor 25% gewijzigd door jurp5 op 10-02-2010 10:07 ]

[Verwijderd]

Meijuh schreef op dinsdag 09 februari 2010 @ 23:10:
Ik probeer aan alle <select> elementen een onchange functie te hangen met JQuery, ik doe het volgende.

code:

var selects = $("#searchForm > select");
    for(var j in selects) {
        selects[j].change(function() {
            alert('foo');
        });
    }

searchForm is dus een formulier.

Firebug geeft de foutmelding "selects[j].change is not a function".

Ik zie zo niet wat ik fout doe, hoe kan ik die onchange eraan hangen?

Als je een for(var j in jquery) op een jquery resultaat doet krijg je meer terug dan alleen de elementen die je verwacht. Je kunt de change function gewoon direct achter de jQuery selector aanzetten. Anders moet je de jQuery each() functie gebruiken of met for(var j = 0; j < selects.length; j++) gebruiken.

[jurp5]

Verwijderd schreef op woensdag 10 februari 2010 @ 10:05:
[...]

Als je een for(var j in jquery) op een jquery resultaat doet krijg je meer terug dan alleen de elementen die je verwacht. Je kunt de change function gewoon direct achter de jQuery selector aanzetten. Anders moet je de jQuery each() functie gebruiken of met for(var j = 0; j < selects.length; j++) gebruiken.

Misschien moet je even het topic zelf doorlezen

Ik had beide voorbeelden al gegeven

[mjax]

Als je toch jQuery gebruikt, dan kan het ook zo (uit m'n hoofd):

code:

$("#searchForm > select").bind("change", function() {
    alert('foo');
});

[jurp5]

mjax schreef op woensdag 10 februari 2010 @ 10:09:
Als je toch jQuery gebruikt, dan kan het ook zo (uit m'n hoofd):

code:

$("#searchForm > select").bind("change", function() {
    alert('foo');
});

Ik denk dat de topicstarter onderhand wel geholpen is


Kan nog korter:

code:

$("#searchForm > select").change(function() {
    alert('foo');
});