0

好吧，我有一个带有类“outfavori”的 span 元素，一旦 dom 加载了一个带有类“masterTooltip”的 img 元素，我就会填充......直到那里，一切都很好，我的 js“masterTooltip”功能最后工作没有任何问题......

当我单击这些带有“outfavori”类的 span 元素时出现问题，我的 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 })
    });
});
4

1 回答 1

0

您需要使用事件委托，因此不要使用速记方法悬停，而是使用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-18T13:48:46.173 回答