jQuery DOM elementen
Ik kom er niet helemaal uit met een jQuery functie die ik aan het bouwen ben. Ik begrijp globaal wat het probleem is. Maar niet precies.
Ik creeer een nieuw HTML element via AJAX, een "select" element.
En zodra dit element is aangemaakt werkt mijn standaard jQuery event handler niet op dit element;
$("input[type=text],select").focusin(function() {
$(this).addClass("selected");
});
Ik begreep dat het te maken heeft met de DOM, het html element bestaat wel maar er bestaat geen DOM van dit element? De event handler wordt namelijk nu alleen getriggered wanneer de pagina geladen is, zodra er nieuwe wijzigingen op de pagina mbt DOM gedaan worden, levert dit problemen als het mijne op. Alleen, hoe los ik dit op?
Links met informatie over DOM en/of DOM icm jQuery zijn overigens ook van harte welkom!
Gewijzigd op 21/08/2013 15:25:59 door Jeffrey Arts
En ja, daar bestaat een simpele oplossing voor. met on() en off()
Dus, stel: je steekt die nieuwe <select> in <div id="container"></div>
Dan doe je dit:
Code (php)
1
2
3
2
3
$('#container').on('focusin', 'select', function() {
$(this).addClass("selected");
});
$(this).addClass("selected");
});
Dat maakt dat jQuery het event bindt aan de container, en telkens dynamisch gaat zien welke elementen er op dat moment aanwezig zijn.
Gewijzigd op 21/08/2013 15:45:16 door Kris Peeters
Of moet ik deze naast mekaar gebruiken. En maakt het nog uit of ik dit in een extern .js bestand zet of dat ik het in mijn html zet?
Jeffrey Arts op 21/08/2013 15:56:05:
Moet ik mijn huidige event handler vervangen worden door de on() ?
Ja, best vervangen.
Jeffrey Arts op 21/08/2013 15:56:05:
En maakt het nog uit of ik dit in een extern .js bestand zet
Zoveel zal dat niet uitmaken, denk ik. (iemand hier een andere mening over?)
Het lijkt me wel properder om het in een bestand te steken, eens alles getest is, alles werkt en de site online is.
Het input veld wordt op de volgende manier aangepast.
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
$.post($what, { ajax: [$data]} , function($rslt) {
if ($rslt) {
$(".result_frame").html($rslt);
var $categories = $(".move_to_categories").html();
$(".move_to_categories").remove();
$("select[name='categories']").parent().html($categories);
}
});
if ($rslt) {
$(".result_frame").html($rslt);
var $categories = $(".move_to_categories").html();
$(".move_to_categories").remove();
$("select[name='categories']").parent().html($categories);
}
});
Dit haalt een pagina op, op basis van de geposte gegevens. De class 'move_to_categories' is een span met hierin de selectbox. Deze html code wordt vervolgens opgeslagen in een variabele en daarna verwijderd (om te voorkomen dat de input er dubbel op staat). Daarna wordt deze op de plek gezet waar eerst de selectbox stond "select[name='categories']"
Waarde $categories is ongeveer:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<select class="breed" name="categories">
<option value="10">Alfred</option>
<option value="32">Jodokus</option>
<option value="234">Willem</option>
<option value="874">Kwak</option>
</select>
<option value="10">Alfred</option>
<option value="32">Jodokus</option>
<option value="234">Willem</option>
<option value="874">Kwak</option>
</select>
Er kan geen fout inzitten mbt de attributen van 'select' aangezien deze in beide gevallen via dezelfde php functie gegenereerd worden.
Gewijzigd op 21/08/2013 19:51:11 door Jeffrey Arts