2012-07-05 65 views
5

我試圖將hoverIntent插件添加到我的頁面上的元素,但是稍後會將一些元素添加到DOM,這意味着我必須將插件綁定到未來的元素。你是怎樣做的?我幾次看過相同的問題,但沒有人有明確的解決方案?jQuery.on() - 元素加載後如何初始化

+0

你試圖等待,直到;圖像或jQuery的功能加載? – 2012-07-05 10:30:42

+0

使用一個作爲事件實現的hoverintent插件,以便它支持委託。''hoverintent''應該是一個不是方法的事件:X – Esailija 2012-07-05 10:40:06

+0

@barlas其實不是,新內容使用InfiniteScroll加載。 – 2012-07-06 06:56:26

回答

2

有沒有支持jQuery做到這一點;這是插件本身必須支持的東西。最常見的方法是在添加新內容後重新初始化插件;這通常不是問題。

另一種選擇是使用liveQuery plugin,並做這樣的事情;

$('yourSelector').livequery(function() { 
    $(this).hoverIntent({ 
     // blah 
    }); 
}); 
+0

我編寫了一個're_init()'函數,其中包含加載新內容後需要重新初始化的所有代碼。我只意識到有更多的代碼,然後** hoverIntent **需要重新初始化,一旦我開始使用此功能。 – 2012-07-06 06:54:36

+0

**對於任何絆倒這個問題的人:** hoverIntent支持事件委派而不需要額外的插件。舉例來看下面的答案。 – 2015-03-17 16:01:00

0

實現此目的的最佳方法是在將新元素添加到頁面時引發自定義事件。此事件的訂閱者可以調用適當的hoverIntent初始程序。

將會有更多本地支持,形式爲mutation observers,但瀏覽器支持目前位於nil旁邊。

聆聽DOMSubtreeModifed事件不可靠,並導致重大性能問題。

+0

突變觀察者支持現在看起來不錯http://caniuse.com/mutationobserver/embed – 2017-09-10 17:18:27

0

試着改變你的jquery結構;

ABC = { 
    init: function() {//all function names goes here 
     ABC.myFunction1(); 
     ABC.myFunction2(); 
     ABC.myFunction3(); 
    }, 
    myFunction1: function() { 
    //code 
    }, 
    myFunction2: function() { 
    //code 
    }, 
    myFunction3: function() { 
    //code 
    }//dont put comma last one 
} 

$(function() { 
    ABC.init();//calls all functions after everything is initialized and ready. 
}); 
9

使用事件代表團 「選擇」 參數。

$('#PARENT').hoverIntent({ 
    over: function() { 
     console.log($(this)); 
    }, 
    out: function(){ 
     console.log($(this)); 
    }, 
    selector: '.CHILD' 
}); 

來源:hoverIntent Documentation