如何在不存在的DOM元素上調用Jquery方法？

我想爲this lightbox plugin用於某些自動填充鏈接，這些鏈接在我的頁面上還不存在。如何在不存在的DOM元素上調用Jquery方法？

您通常使用它激活：

$(document).ready(function($) { 
    $('a[rel*=facebox]').facebox() 
})

由於一個環節不都是在頁面加載的頁面上，我通常會看向.live或.delegate方法綁定到一個事件，但在這種情況下，我會綁定什麼'事件'來說「一旦這個元素在頁面上，然後調用這個方法」。

或者我是否完全錯誤的方式？

謝謝

來源

2011-07-13 noli

有沒有這樣的事件。

將元素添加到頁面時，您需要調用插件。

// create a new <a>, append it, and call the plugin against it. 
$('<a>',{rel:"facebox"}).appendTo('body').facebox();

本例創建一個新<a>元件。如果您收到來自Ajax響應的一些元素，稱之爲對那些：

var elems = $(response); 

elems.filter('a[rel="facebox"]').facebox(); // if the <a> is at the top level 
elems.find('a[rel="facebox"]').facebox(); // if the <a> is nested 

elems.appendTo('body');

來源

2011-07-13 21:59:03 user113716

感謝您的詳細回覆！我希望有一種解決方法，但我不想 – noli

@Noli：不客氣。有一個名爲'livequery'的插件監視DOM的變化，但據我所知，這是相當耗費資源。手動操作會更好。 – user113716

你只是需要這個調用添加到AJAX加載中的鏈接。

來源

2011-07-13 21:59:37 idrumgood

尚未測試：

$(document).ready(function($) { 
    $(document).bind('change', docChanged) ; 
}) 

function docChanged() 
{ 
    if ($('a[rel*=facebox][class!="faceboxed"]').length > 0) 
    { 
     $('a[rel*=facebox][class!="faceboxed"]').addClass("faceboxed").facebox(); 
    } 
}

來源

2011-07-13 22:07:46 ChristopheCVB

不錯，這個也適用 – noli

真的！？我對文檔中的事件_change_有點懷疑，但如果你說它正在工作，我爲你感到高興！ – ChristopheCVB

是的，我不知道，即使存在。謝謝你的提示！ – noli

這是完全可能使用.live功能。你只需要使用DOMNodeInserted事件。

$(document).ready(function() { 
    $("a[rel*=facebox]").live("DOMNodeInserted", function() { 
     $(this).facebox(); 
    }); 
});

來源

2011-07-13 22:22:03 Jedediah

這看起來不錯..但我無法使其在Chrome上工作..不知道是否有Chrome/JQuery的問題或什麼.. – noli

如何在不存在的DOM元素上調用Jquery方法？

回答

相關問題