Archief - jQuery buttons veranderen niet bij onmouseover

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
s

simontor

Legacy Member
Hallo,

Ik heb een probleem met jQuery buttons en ik heb eigenlijk geen flauw idee wat ik mis doe en hoe ik het zou kunnen oplossen.
Ook Google leverde niets op.
Ik zou graag buttons dynamisch (na het openen van dialog etc) willen toevoegen aan mijn pagina.
Hiervoor heb ik de volgende (vereenvoudigde) code geschreven:

Code: 
<div id="buttonwrapper"></div>

<script type="text/javascript">
function addbutton(name, label){
	add = '<button id="' + name + '">' + label + '</button>';
	document.getElementById("buttonwrapper").innerHTML +=add;
	$("#" + name).button();
}

$(document).ready(function() {
    addbutton("btn1", "Button 1");
    addbutton("btn2", "Button 2");
    addbutton("btn3", "Button 3");
    addbutton("btn4", "Button 4");
});
</script>

Deze werkt echter niet helemaal zoals het zou moeten...
Er worden 4 buttons toegevoegd aan de div.
Als ik echter met mijn muis over de buttons ga dan verandert enkel de laatste van kleur.
Wat technischer: Alleen de laatst toegevoegde button krijgt de class ui-state-hover bij een onmouseover.
Ik zou graag hebben dat ze alle 4 veranderen van kleur zoals het zou moeten zijn.
Wie kan me zeggen wat er fout is of ontbreekt aan mij code?
Alvast bedankt!

Groeten, Simon
Z

Zero Grav

Legacy Member
Code: 
<div id="buttonwrapper"></div>

<script type="text/javascript">
function addbutton(name, label){
	add = '<button id="' + name + '">' + label + '</button>';
	$("#buttonwrapper").append( add ).find("#" + name).button()
}

$(document).ready(function() {
    addbutton("btn1", "Button 1");
    addbutton("btn2", "Button 2");
    addbutton("btn3", "Button 3");
    addbutton("btn4", "Button 4");
});
</script>

Probeer het zo eens. Vreemd trouwens dat ge JQuery gebruikt maar dan ondertussen wel gebruikt maakt van innerHTML en getElementById. Die methodes zitten ook allemaal in JQuery.
s

simontor

Legacy Member
Bedankt, Zero Grav! Dat werkt perfect!
Kweet dat het vreemd is dat het een mix tussen 'standaard' JS en jQuery is.
Ik ben al altijd gewend van standaard JS te gebruikn en ik zoek niet altijd het jQuery equivalent.
Ik snap wel niet helemaal hoe je 2 opdrachten (append en find) in 1 regel mixt...
Zijn er daar regels voor en waar kan ik die dan vinden?
Z

Zero Grav

Legacy Member
In JQuery zijn alle selectors en methods eigenlijk combineerbaar. Alle methods (zoals add) slaan dan gewoon terug op de laatste selector. Via end() kunt ge dan terugkeren naar de vorige filter. Dat is de enige regel die ge daavoor moet kennen. :) jQuery API

$("#buttonwrapper").append( add ).find("#" + name).button().end(); zou ons bijvoorbeeld terugbrengen naar #buttonwrapper.

Ge kunt ook gewoon het volgende doen, dat komt op hetzelfde neer maar zal wellicht minder performant zijn omdat ge 2 keer elementen gaat opzoeken.

Code: 
function addbutton(name, label){
	add = '<button id="' + name + '">' + label + '</button>';
	$("#buttonwrapper").append( add );
	$("#buttonwrapper").find("#" + name).button()
}
s

simontor

Legacy Member
Ahzo! Bedankt! Lijkt me zeer nuttig om te gebruiken in mijn verdere code!
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan