jquery
  • live
  • 2010-02-06 88 views 0 likes 
    0
    <input type="text" id="sShState" /> 
    $('#sShState').liveSearch(); // A plug-in 
    // inside plug-in: 
    $this = $(this); 
    
    // On focus I add a dropdown box and add li's; 
    
    var obj = '<ul id="ddList"></ul>'; 
    $this.after(obj); 
    $this.next('ul').html(li's); 
    
    $('#ddList').live('mouseenter', function(){ 
        var $li = $this.next('ul').children('li'); 
        $li.removeClass('hoverLi'); 
        $li.hover(function(e){ 
         $li.filter('[last]').removeAttr('last'); 
         $(this).addClass('hoverLi'); 
        },function() { 
         $li.filter('.hoverLi').attr('last', true); 
         $li.filter('.hoverLi').removeClass('hoverLi'); 
        }); 
    
        $li.click(function(){ 
         selectLi($(this)); 
         removeList(); 
        }); 
    }); 
    

    在Chrome中它非常非常快!为什么Firefox中的代码变慢?

    但是在Firefox中,当鼠标第一次进入ulbox时,它需要1-2秒直到它开始执行代码。

    即使在Internet Explorer 7中也能正常工作。悬停的li仍然有点落后,但是当鼠标进入ul盒子时立即开始执行。

    回答

    2

    您似乎在另一个事件中有事件分配代码。所以无论何时发生'mouseenter'事件,它都会重新分配'悬停'和'点击'事件。你应该在live()函数之外附加一次这些事件。

    我不知道你的页面结构,所以这可能不完全正确。但它确实说明了这个问题。

    $('#ddList').live('mouseenter', function(){ 
        var $li = $this.next('ul').children('li'); 
        $li.removeClass('hoverLi');   
    }); 
    
    $('#ddList li').hover(function(e){ 
         // $(this).filter('[last]').removeAttr('last'); 
         $(this).addClass('hoverLi'); 
    },function() { 
         // $(this).filter('.hoverLi').attr('last', true); 
         $(this).filter('.hoverLi').removeClass('hoverLi'); 
    }); 
    
    $('#ddList li').click(function(){ 
         selectLi($(this)); removeList();  
    }); 
    

    我不能完全肯定发生了什么事情在你的代码,但如果你的目的是,确保事件得到重视动态创建的“礼”的元素,那么你就需要使用.live()就像你为'mouseenter'做的那样。

    $('#ddList li').live('mouseover', function() {... 
    
    $('#ddList li').live('mouseout', function() {... 
    
    $('#ddList li').live('click', function() {... 
    

    编辑:点击()VS活()

    如果我在HTML中具有<div id='mydiv'></div>,解释那么我需要做的是指定以下附加一个单击事件:

    $('#mydiv').click(function() { 
        // whatever I want to do on click 
    }); 
    

    但是,如果div被动态添加到DOM,那么我可以使用live()来代替,并且每当我动态添加元素时,jQuery都会自动分配一个事件。

    $('#mydiv').live('click', function() { 
        // whatever I want to do on click 
        // jQuery takes care of assigning it to mydiv when dynamically added to DOM 
    }); 
    
    +0

    但为什么它在Chrome甚至IE7中速度如此之快,FF如此之慢? – silversky 2010-02-06 20:22:23

    +0

    好问题。我不知道。也许绑定事件元素在FF中简单得慢。铬有一个邪恶的快速JavaScript引擎,所以这有帮助。最终,你想正确地形成你的代码。重复绑定多余的事件是不行的。修复它并查看它在FF中的工作原理。 – user113716 2010-02-06 20:27:06

    +0

    li是动态创建的,所以我不能遍历dom并使用live()。我不认为我可以使用$('#ddList li')。live()。我记得在文档中它说我们应该在选择obj()后立即使用它,它不支持DOM遍历。我理解对吗? – silversky 2010-02-06 20:38:50

    相关问题