jQuery -> Onclick werkt niet
Wanneer er op een input veld word geenterd, komt er een nieuw veld bij. Daarachter komt een div met delete te staan. onClick() moet er wat gebeuren. Dit werkt niet. De allereerste div kan aangeklikt worden en krijg ik een console.log(), maar bij alle andere krijg ik geen console.log() nog een error.
Enig idee wat the issue kan zijn?
groeten Donny
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$( ".ingredient" ).keypress(function(event) {
if ( event.which == 13 ) {
$( '#ingredients-list' ).append('<div class="removeitem">Delete</div>');
$(this).val('');
event.preventDefault();
console.log('enter');
}
});
$('#ingredients-list').on('click',function(){
console.log('Klik');
})
})
</script>
<div id="ingredients-list">
<input type="text" name="ingredients[]" class="ingredient">
<div class="removeitem">Delete</div>
</div>
if ( event.which == 13 ) {
$( '#ingredients-list' ).append('<div class="removeitem">Delete</div>');
$(this).val('');
event.preventDefault();
console.log('enter');
}
});
$('#ingredients-list').on('click',function(){
console.log('Klik');
})
})
</script>
<div id="ingredients-list">
<input type="text" name="ingredients[]" class="ingredient">
<div class="removeitem">Delete</div>
</div>
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
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.
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
De oplossing is om het event telkens opnieuw te registeren op de .removeitem elementen wanneer je er eentje toevoegt:
Code (javascript)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$( ".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();
})
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();
})
Een mooiere methode is gebruik te maken van de child selector methode:
Code (javascript)
1
2
3
2
3
$('#ingredients-list').on('click', '.removeitem', function() {
console.log('Klik');
});
console.log('Klik');
});
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.
Om je vraag over de keypress te beantwoorden; hiervoor gebruik ik het volgende
Code (php)
1
2
3
4
5
6
2
3
4
5
6
$( ".ingredient" ).keyup(function(event) {
var charCode = (window.event) ? event.keyCode : event.which;
if(charCode == 13) {
console.log('enter');
}
});
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.
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.
Dit is mijn html, even simpel en standaard voor het gezicht:
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 (js)
1
2
3
2
3
$('#ingredients-list').on('click', '.removeitem', function() {
$('.hide', $(this).parent()).remove();
});
$('.hide', $(this).parent()).remove();
});
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