jQuery Hover - mouseout Ereignis funktioniert nicht in IE8

Question

Ich habe zwei Felder auf meinem Bildschirm, beide mit dynamisch generiertem Text. Der erste ist ein Mad-libs-Absatztyp, bei dem Sie auf Wörter in der unteren Hälfte des Bildschirms klicken und Wörter in der oberen Box ersetzen können. (Sie sind hier durch das Attribut 'Daten-ID' im Code verbunden.) Ich möchte, dass die Wörter im unteren Feld unterstrichen werden, wenn ich über sie blättern und das entsprechende Wort in der oberen Box fett formatieren soll. Der Mouseenter-Handler für Hover funktioniert in allen meinen Browsern einwandfrei. Aber der Mauselevel-Handler scheint in IE8 ignoriert zu werden, weil Wörter in IE8 fett und unterstrichen bleiben.

<script> 
    $(document).ready(function() { 
    function hoverIn() { 
     var id = $(this).attr('data-id'); 
     var txt = $('.fullText span[data-id='+id+']').text(); 
     var vartxt = $(this).text(); 
     $('.fullText span[data-id='+id+']').html('<b>'+txt+'</b>'); 
     $(this).html('<u>'+vartxt+'</u>'); 
    } 
    function hoverOut() { 
     var id = $(this).attr('data-id'); 
     var txt = $('.fullText span[data-id='+id+']').html(); 
     var newtxt1 = txt.replace(/<b>/gm, ''); 
     var newtxt = newtxt1.replace(/<\/b>/gm, ''); 
     var vtxt = $(this).html(); 
     var newvtxt1 = vtxt.replace(/<u>/gm, ''); 
     var newvtxt = newvtxt1.replace(/<\/u>/gm, ''); 
     $('.fullText span[data-id='+id+']').html(newtxt); 
     $(this).html(newvtxt); 
    } 
    $('body').load(function(){ 
     $('#analyzed').addClass('analyzed'); 
    }); 
    $(".confWords span").bind('click', (function() { 
     var id = $(this).attr('data-id'); 
     $('.fullText span[data-id='+id+']').text($(this).text()); 
    })); 
    $(".confWords span").hover(hoverIn, hoverOut); 

    // Disregard the next 
    $("#reset").bind('click', (function() { 
     $('.orig').trigger('click'); 
    })); 
    $("#edit").bind('click', (function() { 
     history.back(-1); 
    })); 
    }); 
</script> 

Answer 1

Anstatt sich auf .hover unter Berufung() versuchen, speziell auf MouseEnter- und Leave delegieren.

$('.confWords span').live('mouseenter mouseleave', function(event) { 
    if (event.type == 'mousenter') { 
     hoverIn(); 
    } else if (event.type == 'mouseleave') { 
     hoverOut(); 
    } 
}); 

Sie können auch event.stopPropagation(); hinzufügen müssen um das Ereignis zu verhindern, dass eine Sicherungskopie der DOM nach dem Hover rieselt wie folgt:

$('.confWords span').live('mouseenter mouseleave', function(event) { 
    event.stopPropagation(); 

    if (event.type == 'mousenter') { 
     hoverIn(); 
    } else if (event.type == 'mouseleave') { 
     hoverOut(); 
    } 
});