페이지로드시 Jquery mouseenter 이벤트가 중지됩니다.

Question

일부 요소에서 jqueries mouseenter/mouseleave 함수를 사용합니다.

On Mouseenter에서 일부 내용이 아약스 위에로드되고 엘레 메트에 메뉴가 추가됩니다. 마우스를 놓으면 메뉴가 사라집니다.

페이지가 렌더링되는 동안 요소를 가리키면 메뉴가 사라지지 않는 경우가 있습니다. 그들은 눈에 띄지 않습니다. 나는 이것을 데모 코드로 재현 할 수 없다.

제안 사항? .data()에 문제가있을 수 있습니까?

$(document).on('mouseenter', '._hoverflow', channels.smallMenu); 
$(document).on('mouseleave', '._hoverflow', channels.smallMenu); 

toggleMenu: function(p,i){ 
    if(p.data('loaded') === true ){ 
     if(p.data('visible') === true){ 
      i.stop(true,true).fadeOut('fast'); 
      p.removeClass('fadet').data('visible',false); 
     } 
     else{ 
      i.stop(true,true).fadeIn('fast'); 
      p.addClass('fadet').data('visible',true); 
     } 
     return true; 
    } return false; 
}, 
smallMenu: function(a){ 
    var p = $(this), cid = parseFloat(p.data('id')), i = p.find('.channel-dropdown'); 
    if(channels.toggleMenu(p,i)){ return false; } 
    p.addClass('fadet').data('loaded',true).data('visible',true); 
    var s = $.post(channels.vars.details, { id: cid }); 
    s.done(function(data){ channels.menuTemplate(data, cid).appendTo(p).stop(true,true).fadeIn('fast'); }); 

}, 

Answer 1

나는 문제가 사용자가 설정 한 후 p.data('loaded', true)이 때문에 toggleMenu에 p.data('loaded') === true 검사의 가시 상태를 전환 할 수 없다고 생각합니다. 당신은 항상 가시성을 전환하지만, 한 번만 내용을로드 할 수 있습니다

는 주위의 논리를 이동

:

toggleMenu: function(p,i){ 
    if(p.data('visible') === true){ 
     i.stop(true,true).fadeOut('fast'); 
     p.removeClass('fadet').data('visible',false); 
    } 
    else{ 
     i.stop(true,true).fadeIn('fast'); 
     p.addClass('fadet').data('visible',true); 
    } 
}, 

smallMenu: function(a){ 
    var p = $(this), cid = parseFloat(p.data('id')), i = p.find('.channel-dropdown'); 

    // Always toggle the menu visibility. 
    channels.toggleMenu(p,i); 

    // But only load the content once. 
    if(p.data('loaded') === true){ return false; } 
    p.addClass('fadet').data('loaded',true).data('visible',true); 
    var s = $.post(channels.vars.details, { id: cid }); 
    s.done(function(data){ channels.menuTemplate(data, cid).appendTo(p).stop(true,true).fadeIn('fast'); }); 
}