Javascripter
Nieuwe gebruiker
- Lid geworden
- 28 okt 2015
- Berichten
- 1
Beste leden,
Wat doe ik fout? Ik wil graag dat mijn functie afspeeld zodra de nieuwe img elementen worden aangeklikt.
Wanneer ik ze vast in de DOM zet werkt het wel, maar wanneer ik ze later create werkt het niet.
Ik wil ze via de class identificeren als clickable en ieder element die de class clickable heeft moet ervoor zorgen dat de functie begint te lopen zodra erop geklikt wordt.
p.s
wanneer er op het vaste DOM element wordt geklikt ontstaat er 1 row met 1 column. Dit img element moet klikbaar worden zodat wanneer je er op klikt er weer een row en img element bij komt net zoals dat dat gebeurt bij het vaste DOM element met de class "clickable".
Veel dank vooraf!
p.s. ik heb de bijlage en de codes wat aangepast zodat het duidelijker is wat het probleem is
Bekijk bijlage test222.txt
Wat doe ik fout? Ik wil graag dat mijn functie afspeeld zodra de nieuwe img elementen worden aangeklikt.
Wanneer ik ze vast in de DOM zet werkt het wel, maar wanneer ik ze later create werkt het niet.
Ik wil ze via de class identificeren als clickable en ieder element die de class clickable heeft moet ervoor zorgen dat de functie begint te lopen zodra erop geklikt wordt.
p.s
wanneer er op het vaste DOM element wordt geklikt ontstaat er 1 row met 1 column. Dit img element moet klikbaar worden zodat wanneer je er op klikt er weer een row en img element bij komt net zoals dat dat gebeurt bij het vaste DOM element met de class "clickable".
Veel dank vooraf!
p.s. ik heb de bijlage en de codes wat aangepast zodat het duidelijker is wat het probleem is
HTML:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
</head>
<body>
<table>
<thead>
<tr>
<th> Datum: </th>
<th> Gewicht: </th>
<th> Middel: </th>
<th> Heup: </th>
</tr>
</thead>
<tbody id="table" >
<tr id="row0"> <!--- rows --->
<td id="img0" class="clickable"> <img src="cancel.jpg" width="15" height="15" ></td>
</tr>
<!--- hierin komt de javascript -->
</tbody>
</table>
</body>
</html>
Code:
<script type="text/javascript" >
$('.clickable').click(function() {
//zoek het id van tbody van de table
var parent = document.getElementById("table");
// niewe row tr
var NewRow = document.createElement("tr");
// append row aan tbody
parent.appendChild(NewRow);
// niewe column
var Cancel = document.createElement("td");
// append column cancel aan row newrow
NewRow.appendChild(Cancel);
// set cancel attributes
Cancel.setAttribute("id","img1;");
Cancel.setAttribute("class","clickable");
//create imgage
var image = new Image();
//append image aan column cancel
Cancel.appendChild(image);
//set image atributes
image.src = 'cancel.jpg';
image.height= '15';
image.width= '15';
//image.setAttribute("id", "clickable_1;");
//image.setAttribute("class", "clickable");
});
</script>
Laatst bewerkt:
