Tijden veranderen
DOM attribute element toevoegen lijkt niet te werken
Mijn functie werkt alleen als je de column aanklikt die permanent in de tabel is geplaatst
Zodra je een gecreate column aanklikt gebeurt er niks terwijl ook die column het event zou moeten triggeren.
De jquery javascript functie zou alle DOM elementen met een "clickable" class erin moeten herkennen als trigger maar dat doet hij alleen bij de row die er standaart in is geplaatst.
De gecreate rows die er precies hetzelfde uit zien triggeren de functie niet.
Wie kan mij helpen, met voorbaad dank!
De HTML:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!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>
[/table]
</body>
</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>
[/table]
</body>
</html>
De Javascript
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<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>
$('.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>
Gewijzigd op 28/10/2015 13:36:41 door Sam van Berlo
Als je wilt dat jQuery blijft "luisteren" naar de introductie van nieuwe elementen met de clickable-class, zodat hier ook weer listeners aan gekoppeld worden, dan moet je van de .on() functie gebruik maken.
Gewijzigd op 28/10/2015 14:54:22 door Thomas van den Heuvel
Het werkt :)