問題描述
我有一部分代碼通過 AJAX 調用動態加載,方法是將結果附加到父元素,類似于:
現在,為了連接鼠標懸停事件,我會這樣做:
$(".parent").on("mouseenter", ".child", function(){//在這里做有趣的事情}$(".parent").on("mouseleave", ".child", function(){//在這里撤消有趣的東西}
這對于標準功能來說已經足夠好了,但我想將它附加到第三方插件(在我的例子中,HoverIntent,但實際上是任何插件) -
附加 HoverIntent 插件的語法如下:
$(".child").hoverIntent(makeTall, makeShort)
... 但我希望這適用于我在最初加載文檔時不可用的動態內容,以及類似 $(".parent").on("hoverIntent", ".child", function(){});
似乎不是正確的方法.
將插件應用于初始 $(document).ready()
之后加載的元素的正確方法是什么?
解決方案 jquery .on
的工作原理是監視父對象上的事件,然后在事件源自匹配的子選擇器時調用處理程序.但是,在您的情況下,您要監視的事件是元素已更改
瀏覽器僅為輸入元素觸發 onchange 事件(因為它們可以由用戶更改).
如果其他元素發生變化,那一定是javascript的原因,所以你可以在創建新內容后調用函數.
$(".child", parentElementContext).hoverIntent(makeTall, makeShort)
有2個實用的解決方案
1) 我通常做的是創建一個帶有上下文(例如文檔)的 init 方法.
MyPage.init = function(context) {$('.selector', context).hoverIntent();$('.other', context).dialog();//任何其他插件};
然后我在更新 DOM 時手動調用 init(因為我在更新 dom 時并不總是需要調用 init)
$.ajax({網址:網址,數據:數據,成功:函數(數據){var context = $('.parent');上下文.html(數據);MyPage.init(上下文);//調用hoverIntent和其他插件}});
2) 如果你真的需要監控一切,你可以使用這個插件http://james.padolsey.com/javascript/monitoring-dom-properties/一個>
然后 $('.parent').on('valuechange', function() {/* init plugins*
【網站聲明】本站部分內容來源于互聯網,旨在幫助大家更快的解決問題,如果有圖片或者內容侵犯了您的權益,請聯系我們刪除處理,感謝您的支持!