刷新悬停子元素点击后触发AJAX后

嗯，我有一个span类元素的类“outfavori”我一旦加载了一个带有类“masterTooltip”的img元素的dom填充...直到在那里，一切都很好，我的js“masterTooltip”功能在最后工作没有任何问题...刷新悬停子元素点击后触发AJAX后

问题出现，当我点击这些跨度元素类“outfavori”，我的img元素很好地替换后的Ajax但我的“masterTooltip”类不再适用于这个新加载的元素...有没有人有一个想法如何使这个新的加载元素与我的“masterTooltip”元素再次工作？

在此先感谢您的帮助...

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

来源

2013-08-18 snipchain

您需要使用事件委托，所以不是用速记方法hover使用事件处理程序mouseleave和mouseenter功能

$(document).ready(function() { 
    $('.masterTooltip').on('mouseenter', '.masterTooltip', function(e) { 
     var title = $(this).attr('title'); 
     $(this).data('infoTip', title).removeAttr('title'); 
     $('<div class="infoTooltip"></div>') 
     .html(title) 
     .appendTo('body') 
     .fadeIn('slow'); 
    }).on('mouseleave', '.masterTooltip', function(e) { 
     $(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 }) 
    }); 
});

来源

2013-08-18 13:48:46

非常感谢Arun !!!实际上，我替换它，但使用$（document）.on（'mouseenter'，'.masterTooltip'，function（e）{而不是$（'。masterTooltip'）。on（'mouseenter'，'.masterTooltip'，function （e）{它是完美的!!!再次感谢！我阻止了几个小时，甚至没有想到问题是来自mastertooltip函数，我只想到了我的点击功能！我是如此dumm有时......但非常感谢您的帮助！:) – snipchain

刷新悬停子元素点击后触发AJAX后

回答

相关问题