11497 sujets

JavaScript, DOM et API Web HTML5

Salut @ tous !

J'ai une page qui affiche toutes les photos uploadées sur mon site.
Il y a aussi quelques boutons qui permettent de filtrer ces photos selon différents critères

En cliquant sur une photo une "bootstrap modal popup" s'affiche.

En cliquant sur un des boutons pour filtrer les photos, celles-ci sont rechargées via Ajax (jusqu'ici tout va bien...).
Mais une fois les photos rechargées les boutons de filtre ne fonctionnent plus !
$( 'a.show' ).live( 'click', function( e )
    {
 
    $( '#show_big_photo_dialog_box' ).modal( 'show' );
 
    e.preventDefault();
         
    } );
Voici l'erreur affichée dans la console :
Uncaught TypeError: Object [object Object] has no method 'live' init_nodal.js:53
Merci de m'aider ...
Modifié par 6ber6ou (20 Dec 2013 - 10:57)
Salut.

Tu utilises quelle version de jQuery ? Car le live() est deprecated depuis la version 1.7. Même si ton problème ne doit pas venir de ça je pense.

Ton lien "a.show" est un élément qui existe dans le DOM quand tu poses ton écouteur ou pas (chargé en Ajax) ? S'il s'agit du dernier cas, je te conseille d'attacher ton event avec on() via un bloc parent qui ne "disparait" pas, puis de cibler ton lien :

$( "#unParentDeTonLien" ).on( "click", "a.show", function() {
  // ton code
});
J'utilise la version 1.10.2 de jQuery.
Le lien a.show existe dans la page.

J'avais initialement essayé avec on() mais ça ne marchais pas non plus :
$( 'a.show' ).on( 'click', $( this ), function()
6ber6ou a écrit :
J'utilise la version 1.10.2 de jQuery.

Ils ont viré le live() depuis la 1.9, donc ça explique malgré tout ton erreur.

Donc je te conseille d'aller voir la doc jQuery sur on(), juste dans ton écriture, je pense qu'il faut virer le $(this) dans les paramètres. En gros essaie de l'utiliser comme le live() qui était dans ton code.

NB : Je ne sais pas si çà a une incidence mais le preventDefault je le mets au plus haut dans ma fonction callback :
$( 'a.show' ).on( 'click', function(e) {
    e.preventDefault();
    $( '#show_big_photo_dialog_box' ).modal( 'show' );    
} );