Sujet Précédent Sujet Suivant

Jquery: refresh element enfant après ajax

Résolu/Fermé
snipchain Messages postés 6 Date d'inscription samedi 6 juillet 2013 Statut Membre Dernière intervention 18 août 2013 - 18 août 2013 à 15:25
snipchain Messages postés 6 Date d'inscription samedi 6 juillet 2013 Statut Membre Dernière intervention 18 août 2013 - 18 août 2013 à 16:54
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! :)
A voir également:

2 réponses

Réponse 1 / 2
Anoen Messages postés 196 Date d'inscription mardi 10 novembre 2009 Statut Membre Dernière intervention 11 septembre 2013 25
18 août 2013 à 16:41
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 ?
0
Réponse 2 / 2
snipchain Messages postés 6 Date d'inscription samedi 6 juillet 2013 Statut Membre Dernière intervention 18 août 2013
18 août 2013 à 16:54
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! :)
0