jQuery -> Onclick werkt niet

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Junior .NET developer

Functie Als junior .NET developer start jij in een development team met twee ervaren software ontwikkelaars. Jouw persoonlijke ontwikkeling is voor ons erg belangrijk en jij gaat dan ook meelopen met onze Senior .NET ontwikkelaar die jou met zijn kennis en ervaring een goede begeleiding kan aanbieden. Als team zijn jullie verantwoordelijk voor het schrijven van software voor onze toonaangevende Automatiseringssystemen. Jij gaat aan de slag met de onderhoud van de kernsoftware, ondersteund de software van derden door het gebruik van onze webservices en als team zijn jullie verantwoordelijk voor het ontwikkelen van onze backend oplossingen. Wij maken op dit

Bekijk vacature »

Webshop beheerder / Fullstack developer

Functie omschrijving Wij zijn op zoek naar een full stack developer die zich bezig gaat houden met het uitbreiden en verbeteren van de online webshop. Een onderdeel van jouw werkzaamheden is naast het beheren van de webshop ook om de processen en structuren te stroomlijnen. Ben jij een leergierige en ambitieuze junior developer met technische skills? Ben jij op zoek naar een werkgever die jouw de volledige vrijheid geeft om jezelf tot een volwaardige senior te ontwikkelen? Lees dan snel verder! Werkzaamheden Onderhouden van de webshop (denk aan het bijhouden van de voorraad); Nieuwe functies toevoegen aan de product configurator

Bekijk vacature »

Full stack .NET developer Microsoft 365

Wat ga je doen als Full stack .NET developer Microsoft 365? Je stelt je op als sparringpartner voor het team en PO over toekomstige functionaliteiten, architectuur en mogelijke nieuwe producten. Je bent mede-verantwoordelijk voor het vertalen en omzetten van een user story in een passend technisch design. Je implementeert functionaliteiten op basis van een technisch design en user story. Je bent mede-verantwoordelijk voor het beheer van Azure DevOps, waaronder het beheer van GIT, Build Pipelines, Release Pipelines en geautomatiseerde testen. Hier herken jij jezelf in Hbo werk- en denkniveau of hoger aangevuld met relevante certificeringen en/of cursussen; Minimaal 3 jaar

Bekijk vacature »

Medior PHP Developer

Functie omschrijving Ben jij een getalenteerde PHP Developer en aan de slag in een gemotiveerd team? Lees dan snel verder! Voor onze opdrachtgever in de omgeving van Valkenswaard zijn we op zoek naar een ervaren PHP developer. Jij gaat hier zorg dragen voor het optimaliseren en up-to-date houden van de bestaande applicaties. Je werkt verder aan de applicaties die jij verder ontwikkelt. Dit doe je voornamelijk met PHP en MySQL. Verder ga je je bezig houden met: Het uitbouwen van het E-commerce software platform. Deelnemen aan overleggen met het team. Het ondersteunen van jouw team developers (3 man) en helpen

Bekijk vacature »

Software Developer C# / ASP .Net

Functie omschrijving Ben jij een software ontwikkelaar die bekend is met termen ASP .NET, C# en SQL? Lees dan snel verder! Voor een bedrijf binnen de agrarische sector zijn wij namelijk op zoek naar een zelfstandige, enthousiaste en proactieve Software Developer die open staat voor een afwisselende functie met veel uitdaging. Binnen deze organisatie ben jij als Software Developer samen met één andere collega verantwoordelijk voor de ontwikkeling en modificatie van het support en controle programma dat binnen dit bedrijf gebruikt wordt. Hierbij draag jij bij aan de vertaling van klantwensen naar effectieve softwareoplossingen. Daarnaast ben je verantwoordelijk voor: Schatten

Bekijk vacature »

Traineeship Java Developer

Functie Wat ga je doen als Java Developer? Jij start via ons bij deze opdrachtgever als Trainee Java ontwikkelaar, tijdens het traineeship ga je in 1 jaar van de basis naar professioneel Java ontwikkelaar. Je start samen met een groep trainees, volgt de aangeboden cursussen en gaat aan de slag bij één van onze opdrachtgevers. Na een aantal maanden volgt de volgende opdracht. Door de groei in jouw rol kom je op steeds complexere opdrachten terecht. Veel afwisseling dus. Collega’s met ervaring helpen je bij deze groei en samen met jouw coach ga je een persoonlijke leerplan opzetten om jou

Bekijk vacature »

C# developer

Sogeti is een organisatie met een goede werksfeer en zo min mogelijk hiërarchische verhoudingen. Ga je bij ons als C# Developer aan de slag? Dan werk je dagelijks met collega’s aan de mooiste IT-projecten. Deze snelgroeiende groep collega’s krijgt energie van hun vak en dat merk je op de werkvloer. Natuurlijk krijg jij de mogelijkheid je te certificeren. We organiseren regelmatig technische Meet-ups en doen we veel aan kennisdeling. Mede hierdoor zij wij dit jaar Microsoft Partner of the Year geworden. Sogetisten staan klaar voor elkaar, hebben lol met elkaar en daarmee behalen we de mooiste resultaten! Werken bij Sogeti

Bekijk vacature »

PHP Developer

Dit ga je doen Ontwikkelen, implementeren en testen van PHP-oplossingen en Apps voor klanten en bedrijfsprocessen; Opstellen van requirements en uitwerken van de oplossingen; Testen van software en borgen van een soepele overdracht, inclusief documentatie; Proactief adviseren vanuit eigen expertisegebied over ontwikkelingen en verbeterpunten in technische toepassingen en processen binnen de organisatie. Hier ga je werken De organisatie is een ambitieuze en vooruitstrevende speler in de markt in de regio Rotterdam. Ze zijn de snelst groeiende in hun branche. Met een excellent aanbod en service willen zij de beste keuze zijn voor hun bestaande en nieuwe klanten. Dit alles doen

Bekijk vacature »

Embedded Developer C++

Functie omschrijving Ben jij op zoek naar een leuke uitdaging als Embedded Developer, zoek dan niet verder! Voor een leuke opdrachtgever in omgeving Rotterdam zijn wij op zoek naar een Embedded Developer die graag met Embedded Devices werkt. Je zult verantwoordelijk worden voor het ontwikkelen en onderhouden van diverse producten. Jouw specialisatie ligt op het vlak van software, hardware en back-end. Dit bedrijf is gespecialiseerd in het ontwerpen van software voor een unieke industrie. Wil jij betrokken worden bij een proces dat loopt van ontwikkeling tot installatie? Waarbij je bezig zult zijn met perfecte systemen die geleverd worden aan binnen

Bekijk vacature »

Lead React Developer

Dit ga je doen Als Lead React Developer zul jij je voornamelijk gaan bezighouden met: Het werken aan tal van uiteenlopende projecten waar gloednieuwe (web)applicaties van scratch af aan ontwikkeld worden met o.a. React (Native) en Drupal; Het aansturen van een team bestaande uit 5-6 talentvolle en gedreven ontwikkelaars; Het adviseren en meedenken over nieuwe (technische) oplossingen en te gebruiken tools/frameworks; Het meedenken over de architectuur en de juiste implementatiebeslissingen maken; De doorontwikkeling van huidige applicaties. Hier ga je werken Als je inderdaad een ervaren Lead React Developer bent die zichzelf graag nog verder wil ontwikkelen dan is het goed

Bekijk vacature »

Front end developer Zorgplatform

Functie Jij als Front end ontwikkelen zult komen te werken samen met 1 PHP ontwikkelaar, 1 Python developer en een flexibele schil aan ontwikkelaars . Samen ga je ervoor zorgen dat de huidige producten doorontwikkeld worden. De Marketplace is geschreven in PHP Laravel en in de front end React. De roostersoftware is ontwikkeld in Python in combinatie met React in de front end. Jij zult als Front ender dus voornamelijk bezig zijn met het verbeteren van onze interfaces op onze verschillende producten. Momenteel ligt de uitdaging in het feit dat de roostersoftware breder schaalbaar moet worden zodat het voor meerdere

Bekijk vacature »

Junior Front end developer

Functie Jij als developer gaat ons helpen onze producten verder te ontwikkelen en in te zetten in de markt. Op dit moment bestaat ons SaaS product uit 3 componenten die zowel los als in een pakket gekocht kunnen worden. Het gaat hier om een online kaartapplicatie, een workflow tool en een monitoring tool. Momenteel zijn wij 3 jaar geleden gestart met de ontwikkeling. De tech-stack waarmee we werken is voornamelijk Javascript, Vue.js en Python. Daarnaast gebruiken wij FaundaDB als database en werken we veel met GIS applicaties. De uitdaging die we momenteel hebben is dat we momenteel een intern team

Bekijk vacature »

Software Developer PHP JavaScript Python HBO SQL

Samengevat: Wij zijn een softwarebedrijf voor Autodealers. Ben jij een Medior of Senior Software Developer? Heb je ervaring met PHP, JavaScript of Python? Vaste baan: Java.Developer Software HBO €3.000 - €5.200 Bij ons op de werkvloer is er een positieve en informele sfeer. Naast een goede begeleiding en een enthousiaste klantenkring biedt deze werkgever een prettige omgeving met zeer afwisselende werkzaamheden. Houd jij van aanpakken en denk je dat je deze uitdaging aankunt? Dan zoeken wij jou! Zij werken voor grote klanten. Zij doen omvangrijke projecten die we bij deze werkgever op kantoor realiseren (geen detachering). Zij werken met state-of-the-art

Bekijk vacature »

PHP Developer

Functieomschrijving Wij zijn op zoek naar een PHP Developer met Laravel ervaring! Voor een groeiende werkgever in regio Breda zijn wij op zoek naar een medior PHP developer met Laravel ervaring. Je gaat aan de slag met het ontwikkelen van maatwerk software voor klanten in een specifieke markt. Als PHP developer ben je samen met een gemotiveerd team van 6 collega’s verantwoordelijk voor de ontwikkeling, beheer en het innoveren van informatiesystemen voor klanten in een specifieke branche. Als software developer ondersteun je complexe uitdagingen van klanten. Je brengt hun wensen in kaart en vertaalt deze door naar maatwerk software. Om

Bekijk vacature »

Senior C# Software Ontwikkelaar te Zaandam

Bedrijfsomschrijving Deze werkgever heeft als missie om haar klanten op ICT-gebied volledig te ontzorgen. Ze zijn een ICT bedrijf met een verscheidenheid aan ICT oplossingen waaronder Cloud oplossingen en een groot deel van het werk is gericht op software realisatie. Voor de Enterprise-klanten voert het relatief kleine ontwikkelteam waar jij deel uit van kan gaan maken binnen deze organisatie te Zaandam de grootste opdrachten uit. Niet alleen websites en complexe webapplicaties maar ook mobile apps, web services en complete systeemintegraties! Je moet dan denken aan Dynamics, Sharepoint en Salesforce. Je komt hier terecht in een relatief kleine organisatie met ontzettend

Bekijk vacature »
Donny Wie weet

Donny Wie weet

17/03/2014 18:12:40
Quote Anchor link
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)
PHP script in nieuw venster Selecteer het PHP script
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

PHP hulp

27/11/2024 02:43:41
 
Michael -

Michael -

17/03/2014 18:24:09
Quote Anchor link
Moet je dan niet .removeitem hebben?
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
        $('.removeitem').on('click',function(){
            console.log('Klik');
});
 
Donny Wie weet

Donny Wie weet

17/03/2014 18:50:34
Quote Anchor link
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

Wouter J

17/03/2014 22:40:01
Quote Anchor link
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)
PHP script in nieuw venster Selecteer het PHP script
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)
PHP script in nieuw venster Selecteer het PHP script
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 -

Michael -

18/03/2014 08:22:36
Quote Anchor link
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)
PHP script in nieuw venster Selecteer het PHP script
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

Donny Wie weet

18/03/2014 14:58:43
Quote Anchor link
@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

Wouter J

18/03/2014 15:15:53
Quote Anchor link
Donny, ja. Behalve als je de laatste code blok gebruikt en dat zou ik ook willen aanraden om te doen.
 
Donny Wie weet

Donny Wie weet

18/03/2014 16:14:06
Quote Anchor link
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)
PHP script in nieuw venster Selecteer het PHP script
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

Wouter J

18/03/2014 16:23:43
Quote Anchor link
Code (js)
PHP script in nieuw venster Selecteer het PHP script
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

Donny Wie weet

18/03/2014 16:38:52
Quote Anchor link
Nee ik wil zeg maar een span aanmaken waarin text staat, en als je op edit klikt, je de input box te zien ktijgt
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.