Événement jquery sur élément chargé en ajax

Événement jquery sur élément chargé en ajax

Événement jquery sur élément chargé en ajax

En jquery si vous écoutez un évènement celui si ne tiendra pas compte des éléments chargés en ajax, par exemple ce code:

$('#viewer').click(function(e){
    alert('click');
});

ne fonctionnera pas si l'élément <div id="viewer"> est chargé en ajax.

Pour palier à  ce probléme, il existe une soluition simple, à utiliser sur tous vos évènements qui pourraient se retrouver dans ce cas.

Par exemple pour reprendre un code que ideak utilise bien souvent, imaginez une class idk-shower et idk-showable. Les éléments idk-shower prennent en attribut l'id de l'élément à afficher et les class idk-showable sont cachés en css et ne doivent jamais être affichés simultanément:

$(function(){
  $('body').on('click','.idk-shower',function(e){
      e.preventDefault();
      $('.showable').hide();
      $('#'+$(this).attr('data-show')).show();
  });
});

nous sommes sûre que cette évènment fonctionnera toujours, même si les élément de class idk-shower sont chargés en ajax.

Le plus important bien sûre, c'est la façon d'écouter l'évènement:

$(function(){
  $('body').on('click','#viewer',function(e){
      alert('click !!!');
  });
});

Voila qui résoud notre petit problème !

Fait par : joris saenger

Commentaires (0)

Ajouter un commentaire