使用.on綁定到動態生成的內容

我正在使用無限滾動來顯示一些內容，並且在將一些mouseenter/mouseleave事件綁定到新生成的項目時遇到了問題。使用.on綁定到動態生成的內容

我知道我需要將.on綁定到頁面上已存在的容器，但我無法找出語法來更改當前切換的jQuery。

這是當前JS：

$(document).ready(function() { 
    $('.grid-box .actions').hide(); 

    $('.grid-box').on({ 
     mouseenter: function() { 
      $(this).find('.actions').show(); 
     }, 
     mouseleave: function() { 
      $(this).find('.actions').hide(); 
     } 
    }); 

});

主容器是＃網格容器和每個單獨的產品.grid盒。如何修改上述內容以便在進入/離開.grid-box時顯示/隱藏動作？

我想我需要沿着此線的東西：

$('#grid-container').on('mouseenter mouseleave', '.grid-box', function(e) { 

// some action 

});

來源

2013-01-07 Motive

查看這些帖子關於使用'.on（）'動態元素：http：// stackoverflo w.com/questions/9985090/jquery-on-does-not-work-but-live-does/9985137#9985137和http://stackoverflow.com/questions/9814298/does-jquery-on-work-for-元件 - 即-被添加-後的，事件處理程序-是-CRE/9814409＃9814409 – jfriend00

沒錯，這就是所謂的事件委派，並等待事件冒泡，然後匹配基礎上，選擇該事件。這樣更有效率，因爲只有一個處理程序註冊，而不是N元素的數量。此外，您只需綁定一次，而不是每次更改動態內容。

$('#grid-container').on('mouseenter', '.grid-box', function(e) { 

    // some action 

}).on('mouseleave', '.grid-box', function(e) { 

    // some action 

});

來源

2013-01-07 18:43:31 arhea

選擇器作爲第二個參數仍然可以工作：

$('#grid-container').on({ ...}, '.grid-box');

http://jsfiddle.net/QkFTz/1/

的另一種方法將只是分別地結合它們，我個人認爲是更清晰：

$("#grid-container").on('mouseenter', '.grid-box', function() {}) 
    .on('mouseleave', '.grid-box', 'function() {});

來源

2013-01-07 18:44:26

使用.on綁定到動態生成的內容

回答

相關問題