jQuery 가리 키 - IE8에서 mouseout 이벤트가 작동하지 않습니다.

Question

둘 다 동적으로 생성 된 텍스트가있는 내 화면에 두 개의 상자가 있습니다. 첫 번째는 mad-libs 유형의 단락으로 화면 하단의 단어를 클릭하고 상단 상자의 단어를 바꿀 수 있습니다. (코드의 'data-id'속성으로 연결됩니다.) 맨 아래 상자의 단어에 밑줄을 긋고 상단 상자의 해당 단어를 굵게 표시하면됩니다. 호버 용 mouseenter 핸들러는 모든 브라우저에서 정상적으로 작동합니다. 그러나 mouseleave 처리기는 IE8에서 무시되는 것처럼 보입니다. IE8에서 단어가 굵게 표시되고 밑줄이 그어져 있기 때문입니다.

<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

.hover()를 사용하는 대신 mouseenter와 mouseleave를 위임합니다. 다음과 같이

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

또한 호버 후 다시 DOM까지 조금씩에서 이벤트를 방지하기 위해 event.stopPropagation();을 추가해야합니다 :

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

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