Question

好吧，我有一个带有“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 })
    });
});

Answer 1

您需要使用事件委派，因此不要使用简写方法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 })
    });
});

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

1 个答案: