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 では、マウスが初めて ulbox に入ると、コードの実行が開始されるまでに 1 ～ 2 秒かかります。

Internet Explorer 7 でも問題なく動作します。ホバリングされた li は少し遅れたままですが、マウスが ul ボックスに入るとすぐに実行を開始します。

4

1 に答える 1

2

別のイベント内にイベント割り当てコードがあるようです。そのため、「mouseenter」イベントが発生するたびに、「hover」イベントと「click」イベントが再割り当てされます。これらのイベントは、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 ();      
});

あなたのコードで何が起こっているのか完全にはわかりませんが、イベントが動的に作成された 'li' 要素に関連付けられるようにすることが意図されている場合は、'mouseenter' の場合と同様に .live() を使用する必要があります。 .

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

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

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

編集: click() と live() の説明

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
});
于 2010-02-06T20:13:03.517 に答える