jquery: geen javascript interactie na ajax call load()

Heb je het voorbeeld online?

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

Gebruik de functie on() om event handlers te binden aan de elementen. Dan worden ook dynamisch gegenereerde elementen herkent.
http://api.jquery.com/on/

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

<button class="actief">Ajax Button 1</button>
<button class="actief">Ajax Button 2</button>
<button class="actief">Ajax Button 3</button>

index.php

<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:

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

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

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:

$('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.

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>

<?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);
});
});

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)

Wat jij bedoeld is dus alle functies zoals de fancybox en popovers op on binden ?

[size=xsmall]Toevoeging op 04/07/2013 12:30:40:[/size]

haaaa het werkt! Erwin je bent een baas!