jQuery -> Onclick werkt niet

Moet je dan niet .removeitem hebben?

        $('.removeitem').on('click',function(){
            console.log('Klik');
});

Het moet eigenlijk removeitem zijn ja, ben dat vergeten terug te zetten. Ik heb namelijk al zoveel dingen geprobeerd maar alles tevergeefs :(

Toevoeging op 17/03/2014 19:13:49:

Ik ben erachter dat die keypress (enter) ervoor zorgt dat het niet werkt... Iemand een idee hoe nu verder?

Groeten

Allereerst wat semantiek: Een button waar je op klikt om iets te verwijderen is geen division, het is een button. Gebruik dus het <button> element.

Daarnaast moet je eens heel goed je code nakijken en hem eens door http://jshint.com halen. Je mist wat puntkomma's, sommige syntaxen zijn compleet verkeerd en je indenting mag ook wel iets nauwkeuriger.

Dan nu je vraag: De $() maakt gebruik van een DOMList met daarin de geselecteerde nodes (elementen). Deze DOMList wordt 1 keer aangemaakt: Wanneer je de $() functie aanroept. Het .removeitem element dat je dynamisch bij een keypress toevoegt zit dus niet in deze DOMList en zou dit event dus niet krijgen.

[tab]Merk op dat als je document.getElementsByTagName gebruikt je een LiveDOMList krijgt, deze update wel wanneer er een nieuw element dynamisch is ingevoegd. Maar dan heb je alsnog het probleem dat je dan niet de event listener op dit nieuwe element hebt geregistreerd[/tab]

De oplossing is om het event telkens opnieuw te registeren op de .removeitem elementen wanneer je er eentje toevoegt:
[code lang=javascript]
$( ".ingredient" ).keypress(function(event) {
if ( event.which == 13 ) {

$( '#ingredients-list' ).append('<div class="removeitem">Delete</div>');
registerDeleteEvent();
$(this).val('');
event.preventDefault();
console.log('enter');
}
});



function registerDeleteEvent() {
$('#ingredients-list').on('click',function(){
console.log('Klik');
})
};
registerDeleteEvent();

})[/code]

Een mooiere methode is gebruik te maken van de child selector methode:
[code lang=javascript]
$('#ingredients-list').on('click', '.removeitem', function() {
console.log('Klik');
});[/code]
Hiermee registreer je 1 onclick event: op #ingredients-list. Maar de callback functie wordt alleen aangeroepen wanneer je op een .removeitem klikte in het #ingredients-list element.

Ik neem aan dat je met Wouter's voorbeeld een heel eind komt.
Om je vraag over de keypress te beantwoorden; hiervoor gebruik ik het volgende

$( ".ingredient" ).keyup(function(event) {
	var charCode = (window.event) ? event.keyCode : event.which;
	if(charCode == 13) {
		console.log('enter');
	}
});

Voor internet explorer moet je keyup of keydown gebruiken. Keypress werkt niet in IE voor speciale keys als enter, tab, etc.

@Wouter:

Even in mn eigen woorden vertaald: elke keer wanneer ik een item toevoeg, moet ik deze gegevens opnieuw opvragen in de DOM?

Donny, ja. Behalve als je de laatste code blok gebruikt en dat zou ik ook willen aanraden om te doen.

Oke, duidelijk :) Dan loop ik alleen nog tegen het volgende probleem aan:

Dit is mijn html, even simpel en standaard voor het gezicht:

ul
  li
    span.hide HIER TEXT span
    span EDIT span
    span DELETE span
  li
ul

Als ik op edit klik, komt de console.log(klik) wel in beeld, maar hoe removeClass ik de span waar HIER TEXT bij staat? Ik heb geprobeerd om .closest() en .parent() te gebruiken... Dit werkte helaas niet

[code lang=js]$('#ingredients-list').on('click', '.removeitem', function() {
$('.hide', $(this).parent()).remove();
});[/code]

Al zou ik dan gewoon heel de li verwijderen?

Nee ik wil zeg maar een span aanmaken waarin text staat, en als je op edit klikt, je de input box te zien ktijgt