Jquery: refresh element enfant après ajax

Résolu/Fermé
Signaler
Messages postés
6
Date d'inscription
samedi 6 juillet 2013
Statut
Membre
Dernière intervention
18 août 2013
-
Messages postés
6
Date d'inscription
samedi 6 juillet 2013
Statut
Membre
Dernière intervention
18 août 2013
-
Bonjour à tous! :)

voilà, j'ai un élément span avec une classe "outfavori" que je remplis dés la fin du chargement du dom avec un élément img avec une classe "masterTooltip"... jusque là, tout se passe bien, mon js "masterTooltip.js" qui se trouve à la fin fonctionne sans souci...

Le problème vient quand je clique sur cet élément span avec la classe "outfavori", j'ai mon élément img qui est bien remplacée après ajax par ce qu'il me faut mais la classe "masterTooltip" ne fonctionne plus sur cet élément nouvellement chargé... avez vous une idée comment cet élément qui suit ajax et inséré dans la span pourrait continuer de fonctionner avec la classe "masterTooltip"? j'ai essayé différentes solutions mais sans succès jusqu à présent... :( j'aurai bien voulu que la possibilité $(document).on('click','.outfavori .masterTooltip', function(){ existe mais comme ce n'est pas le cas...

<body>
 
<span class="outfavori" relfavori="12">
</span>
 
$(document).ready(function() {
 
    $('.outfavori').html('<img src="images/favori_gris.png" class="masterTooltip" title="Ajouter dans les favoris">');
 
    $(document).on('click','.outfavori', function(){
         
        var thisoutfavori = $(this);
        var relfavori = thisoutfavori.attr('relfavori');
         
        thisoutfavori.html('<img src="images/ajax-loader.gif">');
 
        var id = 'id=' + relfavori;
 
        $.ajax({
            type: 'GET',
            url: 'ajax.php?' + id,
            timeout: 3000,
            success: function(data) { tip = data; },
            error: function() { tip = 'error'; },
            complete: function() {
                if(tip==''){
                    thisoutfavori.html('<img src="images/favori_jaune.png" class="masterTooltip" title="Retirer des favoris">');
                    thisoutfavori.removeClass('outfavori').addClass('infavori');
                }else{
                    thisoutfavori.html('<span class="error">Error...</span>');
                }
            }
        });
    });
 
});

$(document).ready(function() {
        $('.masterTooltip').hover(function(){
            var title = $(this).attr('title');
            $(this).data('infoTip', title).removeAttr('title');
            $('<div class="infoTooltip"></div>')
            .html(title)
            .appendTo('body')
            .fadeIn('slow');
        }, function() {
            $(this).attr('title', $(this).data('infoTip'));
            $('.infoTooltip').remove();
        }).mousemove(function(e) {
            var mousex = e.pageX + 20;
                        var mousey = e.pageY + 10;
            $('.infoTooltip').css({ top: mousey, left: mousex })
        });
 });

</body>


Merci beaucoup pour votre aide! :)

2 réponses

Messages postés
196
Date d'inscription
mardi 10 novembre 2009
Statut
Membre
Dernière intervention
11 septembre 2013
25
j'aurai bien voulu que la possibilité $(document).on('click','.outfavori .masterTooltip', function(){ existe mais comme ce n'est pas le cas...

Tu peux le faire en faisant
$('.outfavori .masterTooltip').click(function(){});


Pour le reste est-ce que tu peux mettre une page en ligne avec tout ça qu'on voit précisément ce qu'il se passe ?
Messages postés
6
Date d'inscription
samedi 6 juillet 2013
Statut
Membre
Dernière intervention
18 août 2013

c'est résolu, le problème venait de la version "short" de la fonction hover... ce qui est réglé maintenant avec
$(document).on('mouseenter', '.masterTooltip', function(e) {
    ...
}).on('mouseleave', '.masterTooltip', function(e) {
    ...
}).mousemove(function(e) {
    ...
});

Merci tout de même pour ton aide Anoen! :)