jQuery -> Onclick werkt niet

Back-end Developer

Functieomschrijving Voor een erkende werkgever in de regio van Middelburg zijn wij op zoek naar een enthousiaste PHP / Symfony Developer. Een ambitieus persoon die het gemotiveerde development team komt versterken met het realiseren van nieuwe en complexe projecten. Ben jij op zoek naar een baan met veel uitdaging binnen een snelgroeiend e-commerce bedrijf, waar je de tijd en ruimte krijgt voor professionele groei? Dit ga je doen: Je bent verantwoordelijk voor de beheer en ontwikkeling van de serviceportal in Symfony en de webshops in de tweede versie van Magento; Je houdt je bezig met het ontwikkelen van nieuwe functionaliteiten;

Bekijk vacature »

C# .NET Developer

Functieomschrijving Voor dit leuke softwarre bedrijf in de omgeving Vught zijn we per direct op zoek naar een C#/.NET Developer. Is development jouw passie en doe je dit graag met C#/.NET? Lees dan snel verder! Jou werkzaamheden zullen zijn: Zorgen voor de optimalisatie van de huidige software en het automatiseren van bedrijfsprocessen. Naar aanleiding van de wensen van de klant ga je, met je collega's op zoel naar passende oplossingen en je werkt dit uit tot een mooi eindproduct. Je gaat webshops, websites en webapplicaties ontwikkelen door middel van ASP.NET, C# en MVC Framework. Bedrijfsprofiel Deze opdrachtgever houdt zich bezig

Bekijk vacature »

PHP Developer

Functie omschrijving Voor een bedrijf in Den Bosch zoek ik een PHP Developer, die al wat werkervaring heeft. Jij gaat aan de slag met de verdere professionalisering van de interne applicaties en software. In de functie ga je verder: Verdere ontwikkeling eigen CRM systeem, vooral middels PHP; Bouwen van verschillende API's & koppelingen; Meedenken om de software/applicaties te verbeteren/optimaliseren; Aan de slag met de interne tooling. Bedrijfsprofiel Dit bedrijf is actief binnen de telecombranche. Het hoofdkantoor zit in regio van Den Bosch en er werken ruim 70 medewerkers, verdeeld over verschillende afdelingen. De afdeling Development bestaat uit vijf collega's, onder

Bekijk vacature »

Medior/Senior Python developer

Functie Jij als Senior Python developer hebt al ruime ervaring opgedaan. Bedrijven komen bij de organisatie om technische vraagstukken op te lossen. Jij als specialist bent dus de representatie van deze kwaliteit. Je zult de keuze krijgen tussen lange of korte projecten waarin je komt te werken in multidisciplinaire teams. Projecten die je gaat uitvoeren zijn zeer uitlopend. Zodoende kun je aan de ene kant kiezen voor een greenfield project en stroom je bij een ander project midden in een migratietraject in. Voor de ene klant ontwikkel je ene nieuwe portal en voor het andere project duik je veel meer

Bekijk vacature »

PHP Developer

Zie jij mogelijkheden om onze tooling technisch te verbeteren en uit te bouwen? Over Jobmatix Jobmatix is een innovatieve en internationale speler op het gebied van jobmarketing. Onze jobmarketing automation tool helpt organisaties bij het aantrekken van nieuw talent door vacatures digitaal, geautomatiseerd en op een efficiÃ«nte manier te adverteren en onder de aandacht te brengen bij de doelgroep op 25+ jobboards. Volledig performance-based, waarbij organisaties betalen op basis van cost per click of cost per applicant. Maandelijks wordt onze jobmarketing automation tool al gebruikt door vele directe werkgevers, intermediairs en mediabureaus, waaronder Picnic, Rijkswaterstaat, AdverOnline, Schiphol, DPA, Teleperformance en

Bekijk vacature »

C#.NET Developer

Functieomschrijving We are looking for a dutch native speaker In deze uitdagende functie ga je werken als onderdeel van het development team, in de functie van C#.NET Developer, Je gaat maatwerk software bouwen voor diverse klanten. Ook optimaliseer je bestaande software en bouw je API koppelingen. Je bent vooral met back-end development bezig. Je krijgt veel vrijheid in deze functie en je krijgt de kans om mee te denken in bedrijfsprocessen. Deels thuiswerken is geen enkel probleem! Bedrijfsprofiel Deze organisatie is gevestigd in de regio van Boxtel. Het is van oorsprong een familiebedrijf, die gestart zijn met het bouwen van

Bekijk vacature »

Lead Java Developer

Dit ga je doen Je taken bestaan onder andere uit: Het aansturen van een development team bestaande uit 8 collega's op technisch maar ook HR gebied; Het maken van strategische keuzes omtrent de (nieuw)bouw van deze applicatie; Het maken van technische ontwerpen; Hands-on mee ontwikkelen met het team (met o.a. Java, Spring, Angular, REST); Reviewen van code en feedback geven op collega developers. Hier ga je werken Als Lead Software Developer ben je verantwoordelijk voor Ã©Ã©n van de vier Agile Java ontwikkelteams die bouwen aan technologie die duizenden instanties wereldwijd verbindt. Dit Agile team, data Jira en Confluence gebruikt en

Bekijk vacature »

Freelance JAVA / C# Developer

Functieomschrijving Voor een opdrachtgever in omgeving Zoetermeer zijn wij op zoek naar ervaren JAVA of C# Developers die graag op projectbasis willen werken. Je komt terecht bij een informele developers club die mooie projecten uitvoeren voor grote klanten. Ben je een ervaren freelancer of werk je in loondienst en ben je toe aan een nieuwe uitdaging? Lees dan snel verder want wie weet is dit een leuke vacature voor jou! Het fijne van deze werkgever is dat je zelf mag beslissen hoe je te werk wilt gaan. Wil je als freelancer werken dan is dat OK. Wil je de zekerheid

Bekijk vacature »

Oracle APEX developer

Wat je gaat doen: Als Oracle APEX ontwikkelaar bij DPA werk je samen met collegaâ€™s aan de meest interessante opdrachten. Je zult je ervaring met SQL, PL/SQL, JavaScript, HTML en CSS inzetten om wensen van opdrachtgevers te vertalen naar technische oplossingen. Je werk is heel afwisselend, omdat DPA zich niet beperkt tot een specifieke branche. Zo ben je de ene keer bezig binnen de zorgsector, de andere keer is dit bij de overheid. Wat we vragen: Klinkt goed? Voor deze functie breng je het volgende mee: Je hebt een hbo- of universitaire opleiding afgerond Je hebt 2 tot 5 jaar

Bekijk vacature »

Back-end Programmeur

Functieomschrijving Heb jij kort geleden je HBO ICT in ontvangst mogen nemen? Of ben je toe aan een nieuwe uitdaging? Voor een ambitieuze werkgever in de regio van Breda zijn wij op zoek naar een Back-end programmeur met affiniteit met C#.NET, SQL en MS Access. Samen met team bestaand uit ware ICT professionals ben je verantwoordelijk voor het bouwen van maatwerk software voor hun klanten. Belangrijk is dat je kennis of ervaring hebt van C#.NET en SQL. Je toont een flexibele en sociale houding naar klanten toe. Je denkt in nieuwe mogelijkheden & gaat graag de uitdaging aan. Bedrijfsprofiel De

Bekijk vacature »

Oracle APEX developer

Bekijk vacature »

.Net ontwikkelaars voor de zorgsector

Bedrijfsomschrijving Voor onze klant in de omgeving van Zwolle zijn wij op zoek naar een ervaren .Net ontwikkelaar, bij voorkeur met ervaring binnen de belangrijkste sector van Nederland, namelijk: de zorgsector. Deze internationale organisatie ontwikkelt software voor de zorgsector. Er werken zo'n 25 medewerkers hard aan een oplossing die gebruikt wordt door heel Nederland. Er heerst een informele sfeer waarbij er altijd ruimte is voor een grapje. Je collega's zijn stuk voor stuk sterke ontwikkelaars vanuit verschillende achtergronden en met verschillende leeftijden. Je komt hier terecht in een organisatie die zich hard inzet om de zorgsector te verbeteren. De mogelijkheden

Bekijk vacature »

Front-end Developer

Onze klant is sinds 2 jaar actief als adviseur en bemiddelaar in de verzekeringsmarkt. Sindsdien proberen zij deze slapende markt flink wakker te schudden. Dit willen zij doen door het bouwen van slimme vergelijkers op hun eigen website en die van partners. Het bedrijf wil continu voorop lopen, zodat consumenten eenvoudig de verzekeringen kunnen vinden die het beste bij ze past. Functieomschrijving Als Front-end Developer werk je aan vergelijkingsmodules die consumenten dagelijks gebruiken bij het vergelijken en afsluiten van verzekeringen. Je vindt het leuk om samen te werken met de product owner, bestaande modules te verbeteren en nieuwe vergelijkers "from

Bekijk vacature »

PHP Developer

Functie omschrijving Als PHP Developer ga jij aan de slag met uitdagende software projecten. Jij gaat in deze functie software applicaties ontwikkelen. Deze software projecten zijn heel divers, en deze organisatie maakt software, van A tot Z. Klanten kunnen in elke sector werkzaam zijn, van profit tot non-profit. Deze software bouw je vooral in PHP en specifiek Laravel. Dit framework kent dus geen geheimen voor jou. De software die jij gaat ontwikkelen is heel divers, van urenregistratiesystemen tot compleet geautomatiseerde tools. In deze veelzijdige functie ga jij je zeker niet vervelen, elke dag bestaat weer uit nieuwe uitdagingen. Bedrijfsprofiel Deze

Bekijk vacature »

SAP HANA Cloud Application Developer

Vacature details Vakgebied: Software/IT Opleiding: Senior Werklocatie: Veldhoven Vacature ID: 12662 Introductie HANA Cloud Application Developer at a High Tech company. The company is the world's leading provider of lithography systems for the semiconductor industry, manufacturing complex machines that are critical to the production of integrated circuits or chips. Our purpose is â€œunlocking the potential of people and society by pushing technology to new limitsâ€. We do this guided by the principles â€œChallengeâ€, â€œCollaborateâ€ and â€œCareâ€. This role is situated in the Big Data Analytics (BDA) Domain. The teams have mixture of young talent and senior specialists and have a

Bekijk vacature »

Donny Wie weet

17/03/2014 18:12:40

Hoi allemaal,

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

    $( ".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>

PHP hulp

26/11/2024 22:29:35

Michael -

17/03/2014 18:24:09

Moet je dan niet .removeitem hebben?

Code (php)

1
2
3

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

Donny Wie weet

17/03/2014 18:50:34

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

Wouter J

17/03/2014 22:40:01

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.

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

$( ".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();

})

Een mooiere methode is gebruik te maken van de child selector methode:

Code (javascript)

1
2
3

$('#ingredients-list').on('click', '.removeitem', function() {
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.

Michael -

18/03/2014 08:22:36

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

Code (php)

1
2
3
4
5
6

$( ".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.

Donny Wie weet

18/03/2014 14:58:43

@Wouter:

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

Wouter J

18/03/2014 15:15:53

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

Donny Wie weet

18/03/2014 16:14:06

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

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

Code (php)

1
2
3
4
5
6
7

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

Wouter J

18/03/2014 16:23:43

Code (js)

1
2
3

$('#ingredients-list').on('click', '.removeitem', function() {
$('.hide', $(this).parent()).remove();
});

Al zou ik dan gewoon heel de li verwijderen?

Donny Wie weet

18/03/2014 16:38:52

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

Forum berichten

Reacties

PHP scripts

PHP tutorials

Actief op PHPhulp

jQuery -> Onclick werkt niet

Donny Wie weet

PHP hulp

Michael -

Donny Wie weet

Wouter J

Michael -

Donny Wie weet

Wouter J

Donny Wie weet

Wouter J

Donny Wie weet

Over PHPhulp

Support

Gesponsord

Extra's

Privacy