jquery: geen javascript interactie na ajax call load()
Ik doe een ajax call en alles word prima weergegeven zoals het hoort.
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<?php
<script>
$(document).ready(function(){
$('.catlist').click(function(){
var $cat = $(this).attr('id');
$('#loadbycat').load('videos/loadvideobycat/'+$cat);
});
});
</script>
?>
<script>
$(document).ready(function(){
$('.catlist').click(function(){
var $cat = $(this).attr('id');
$('#loadbycat').load('videos/loadvideobycat/'+$cat);
});
});
</script>
?>
Het enigste probleem is dat op die gegevens die uit de ajax call komen geen jquery meer werkt. de css en dergelijk zijn er perfect uit. maar ze worden precies niet door de DOM erkend. Zelf zijn ze niet te zien in de source van de pagina.
Iemand een idee wat er hier aan de hand is ?
thx
Toevoeging op 04/07/2013 10:37:33:
hier worden ze ingeladen <ul id="loadbycat" class="thumbnails"></ul>
by category daar komen dus de calls en openen niet in fancybox en geen deftige popovers
kijk zelf maar
http://api.jquery.com/on/
Dat klopt inderdaad.
Je maakt die elementen actief op $(document).ready. Alles wat dan nog niet ready is, wordt dus niet actief.
En daar bestaat een oplossing voor.
Voorbeeld van het probleem: (3 buttons aanwezig. 3 worden dynamisch geladen. Een klik op de button maakt de border rood)
ajax.php
Code (php)
1
2
3
2
3
<button class="actief">Ajax Button 1</button>
<button class="actief">Ajax Button 2</button>
<button class="actief">Ajax Button 3</button>
<button class="actief">Ajax Button 2</button>
<button class="actief">Ajax Button 3</button>
index.php
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
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
<style>
.rood {
border: 1px solid red;
}
</style>
<div id="buttons">
<button class="actief">Button A</button>
<button class="actief">Button B</button>
<button class="actief">Button C</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function(e) {
// buttons actief maken
$('.actief').click(function(e) {
$(this).addClass('rood');
});
// extra buttons laden
$.ajax({
url: 'ajax.php',
success: function(data) {
$('#buttons').append(data);
}
});
});
</script>
.rood {
border: 1px solid red;
}
</style>
<div id="buttons">
<button class="actief">Button A</button>
<button class="actief">Button B</button>
<button class="actief">Button C</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function(e) {
// buttons actief maken
$('.actief').click(function(e) {
$(this).addClass('rood');
});
// extra buttons laden
$.ajax({
url: 'ajax.php',
success: function(data) {
$('#buttons').append(data);
}
});
});
</script>
Oplossing: met on() en eventueel off()
$(parent).on('click', child, function(){...})
Dus hier:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
$(document).ready(function(e) {
// buttons actief maken
$('#buttons').on('click', '.actief', function(e) {
$(this).addClass('rood');
});
// extra buttons laden
$.ajax({
url: 'ajax.php',
success: function(data) {
$('#buttons').append(data);
}
});
});
</script>
$(document).ready(function(e) {
// buttons actief maken
$('#buttons').on('click', '.actief', function(e) {
$(this).addClass('rood');
});
// extra buttons laden
$.ajax({
url: 'ajax.php',
success: function(data) {
$('#buttons').append(data);
}
});
});
</script>
Gewijzigd op 04/07/2013 11:02:35 door Kris Peeters
ik heb deze nu ik krijg de call maar geen elementen in de source dus ook geen jquery interactie met die elementen
$(document).ready(function(e){
$('.catlist').on('click', function(e){
var $cat = $(this).attr('id');
$('#loadbycat').load('videos/loadvideobycat/'+$cat);
});
});
on() maakt het mogelijk om de event handler niet direct aan het element te binden, maar aan een container element dat wel al bestaat:
Code (php)
1
2
3
2
3
$('body').on('click', '.catlist', function(){
});
});
De event handler wordt nu dus aan de body tag gebonden (die bestaat altijd als je het goed doet) en zodra er een click event wordt gezien op een element dat een child is van de body en op een element dat aan de selector '.catlist' voldoet, dan wordt deze event handler afgeroepen op dat element (dus niet op de body tag!). Ook dynamische elementen worden nu meegenomen omdat in eerste instantie de bind op de container is en het op dat moment niet uitmaakt of er uberhaupt al elementen bestaan die aan de selector voldoen. De container bestaat en dus kan het gebonden worden.
mss even mijn php file laten zien dit staat er mijn model dus dit word geladen door de ajax call in
<ul id="loadbycat" class="thumbnails"></ul>
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<?php
foreach($handle as $result){
print '<li class="span2">';
print '<div data-toggle="tooltip" title="Category '.$result['category'].'" data-content="'.$result['title'].'" class="thumbnail">';
print '<a class="video" href="'. $result['video'] .'"><img class="open" src="'.$result['thumbnail'].'" alt="'.$result['title'].'"></a>';
print '<h6>'.output::short(0, 15, $result['title']).'...<h6>';
print '</div>';
}
?>
foreach($handle as $result){
print '<li class="span2">';
print '<div data-toggle="tooltip" title="Category '.$result['category'].'" data-content="'.$result['title'].'" class="thumbnail">';
print '<a class="video" href="'. $result['video'] .'"><img class="open" src="'.$result['thumbnail'].'" alt="'.$result['title'].'"></a>';
print '<h6>'.output::short(0, 15, $result['title']).'...<h6>';
print '</div>';
}
?>
$(document).ready(function(){
$('body').on('click', '.catlist', function(){
var $cat = $(this).attr('id');
alert($cat);
$('#loadbycat').load('videos/loadvideobycat/'+$cat);
});
});
Gewijzigd op 04/07/2013 12:07:50 door anthony de meulemeester
Toevoeging op 04/07/2013 12:30:40:
haaaa het werkt! Erwin je bent een baas!