jquery: geen javascript interactie na ajax call load()

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Java developer met testervaring

Java developer met testervaring Functieomschrijving "De drempel tussen de burger en de Belastingdienst zo laag mogelijk houden: dat is de belangrijke taak van ons team. Dit doen we door het burgerportaal Mijn Belastingdienst continu te verbeteren." René, Java-specialist bij de Belastingdienst. De keten Interactie is een samenwerkingsverband van alle dienstonderdelen binnen de Belastingdienst. Samen zorgen we dat het contact met burgers en bedrijven goed kan plaatsvinden. Onze belangrijkste opgave? Zoveel mogelijk digitaliseren. Dat doen we binnen het onderdeel Informatievoorzieningen (IV), de ICT-organisatie van de Belastingdienst. Denk bij de producten die IV-Interactie ontwikkelt en onderhoudt aan portalen, formulieren en authenticatie- en

Bekijk vacature »

Anthony de meulemeester

anthony de meulemeester

04/07/2013 10:36:47
Quote Anchor link
Beste mensen,

Ik doe een ajax call en alles word prima weergegeven zoals het hoort.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>

?>


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>
 
PHP hulp

PHP hulp

20/10/2021 02:14:52
 
Donny Wie weet

Donny Wie weet

04/07/2013 10:38:54
Quote Anchor link
Heb je het voorbeeld online?
 
Anthony de meulemeester

anthony de meulemeester

04/07/2013 10:50:23
Quote Anchor link
https://twndle.com maar is beta e :P

by category daar komen dus de calls en openen niet in fancybox en geen deftige popovers

kijk zelf maar
 
Erwin H

Erwin H

04/07/2013 10:57:31
Quote Anchor link
Gebruik de functie on() om event handlers te binden aan de elementen. Dan worden ook dynamisch gegenereerde elementen herkent.
http://api.jquery.com/on/
 
Kris Peeters

Kris Peeters

04/07/2013 11:01:54
Quote Anchor link
darn, te laat :)

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)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<button class="actief">Ajax Button 1</button>
<button class="actief">Ajax Button 2</button>
<button class="actief">Ajax Button 3</button>


index.php
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
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>


Oplossing: met on() en eventueel off()
$(parent).on('click', child, function(){...})

Dus hier:
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
<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
 
Anthony de meulemeester

anthony de meulemeester

04/07/2013 11:32:34
Quote Anchor link
Hmm bedankt maar het lukt precies niet zo goed

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);
});
});
 
Erwin H

Erwin H

04/07/2013 11:47:47
Quote Anchor link
Zoals je het nu doet verandert er inderdaad niets. Op deze manier wordt er nog steeds iets gebonden aan '.catlist' en alleen aan de elementen die al bestaan op het moment dat je pagina laadt.

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)
PHP script in nieuw venster Selecteer het PHP script
1
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.
 
Anthony de meulemeester

anthony de meulemeester

04/07/2013 12:05:43
Quote Anchor link
ok ik krijg nu ook calls maar geen interactie :S

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)
PHP script in nieuw venster Selecteer het PHP script
1
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>';
}

?>


$(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
 
Erwin H

Erwin H

04/07/2013 12:11:17
Quote Anchor link
Maar wat verwacht je dan? Die '.catlist' zijn de elementen in je drop down, dat heeft dus niets te maken met de dynamische elementen die worden geladen in je container. Je zal alle event handlers die op die elementen werken moeten binden via de on() functie. Dat is nu niet gebeurd, dus nu zal het ook nog niet werken. (aannemende dat de versie op de eerder gegeven link de huidige versie is)
 
Anthony de meulemeester

anthony de meulemeester

04/07/2013 12:27:24
Quote Anchor link
Wat jij bedoeld is dus alle functies zoals de fancybox en popovers op on binden ?

Toevoeging op 04/07/2013 12:30:40:

haaaa het werkt! Erwin je bent een baas!
 



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.