Javascript op toegevoegde HTML aan de hand van AJAX (via PHP) werkt niet.
Ik ben bezig met een soort systeempje voor het bijhouden van voorraden.
Hierin zit onder andere een search die je pagina niet refresht (via ajax -> PHP -> terugkoppeling):
(PHP gedeelte wat terugkomt)
(JQuery gedeelte dat tabelrijen toevoegd aan de tabel)Dit werkt allemaal.
Alleen probeer ik nu JQuery toe te voegen aan de toegevoegde tabelrijen via AJAX en reageren deze niet.
Als ik het op met de hand toegevoegde tabelrijen probeer lukt het wel.
(JQuery)Dit komt dus hoogstwaarschijnlijk doordat JQuery niet op deze manier kan uitgevoerd worden op HTML dat is toegevoegd via AJAX.
Iemand die hier toch een oplossing voor heeft?
Groet,
Joep de Jong
Omdat "tr" nogal breed is doe je er verstandig aan om een soort van container te definieren om je tr-gebied-waar-je-clickevents-aan-wilt-hangen af te bakenen. Dit kunnen bijvoorbeeld een of meer specifieke tabellen zijn die je identificeert met een class. Dit principe heet delegated event approach als ik mij niet vergis.
Als je dus zoiets doet:
Code (php)
1
2
3
2
3
$('table.clickable tr').on('click', function() {
// stuff
});
// stuff
});
Dan zou het click event moeten werken voor alle bestaande EN toekomstig geintroduceerde tr-elementen van tables met class "clickable".
Het heeft daarbij dus de voorkeur om dit gebied zo precies mogelijk af te bakenen (zo dicht mogelijk te zetten bij de HTML elementen waar het om te doen is, en niet 10 niveau's hoger in je hierarchie).
Gewijzigd op 25/06/2015 21:38:13 door Thomas van den Heuvel
Bedankt voor je reactie!
Het werkt echter nogsteeds niet.
Code (php)
1
2
3
2
3
$('tr').on('click', function() {
alert('test');
});
alert('test');
});
geeft zelf ook geen antwoord zodra ik op de row click...
Voor de rest ook geen JS errors o.i.d.
Enig idee waar het dan aan kan liggen?
Groet,
Joep
Gewijzigd op 25/06/2015 22:03:10 door Joep de Jong
Code (php)
1
2
3
2
3
$('table.identifier').on('click', 'tr', function() {
// stuff
});
// stuff
});
Dat werkt:
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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>.on test</title>
<style type="text/css">
table.clickable { border-collapse: collapse; }
table.clickable tr { border: 5px solid #ff0000; background-color: #ffcccc; }
table.clickable tr.active { background-color: #ccccff; }
table.clickable tr td { width: 250px; height: 50px; line-height: 50px; text-align: center; }
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<table class="clickable">
<tr><td>click me</td></tr>
<tr><td>click me</td></tr>
<tr><td>click me</td></tr>
</table>
<button type="button" id="addRowButton">add row</button>
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
$('table.clickable').on('click', 'tr', function() {
$(this).addClass('active');
});
$('#addRowButton').click(function() {
// of dit nu via AJAX binnenkomt of op een andere manier wordt toegevoegd is verder niet relevant
$('table.clickable').append('<tr><td>click me too</td></tr>');
});
})
//]]>
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>.on test</title>
<style type="text/css">
table.clickable { border-collapse: collapse; }
table.clickable tr { border: 5px solid #ff0000; background-color: #ffcccc; }
table.clickable tr.active { background-color: #ccccff; }
table.clickable tr td { width: 250px; height: 50px; line-height: 50px; text-align: center; }
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<table class="clickable">
<tr><td>click me</td></tr>
<tr><td>click me</td></tr>
<tr><td>click me</td></tr>
</table>
<button type="button" id="addRowButton">add row</button>
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
$('table.clickable').on('click', 'tr', function() {
$(this).addClass('active');
});
$('#addRowButton').click(function() {
// of dit nu via AJAX binnenkomt of op een andere manier wordt toegevoegd is verder niet relevant
$('table.clickable').append('<tr><td>click me too</td></tr>');
});
})
//]]>
</script>
</body>
</html>