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

Question

我想使用这个灯箱插件来实现我的页面上尚不存在的一些自动完成链接。

您通常使用以下方式激活它：

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

由于页面加载时 a 链接并不全部出现在页面上，因此我通常会查找 .live 或 .delegate 方法来绑定一个事件，但在这种情况下，我将绑定到什么“事件”来表示“一旦此元素位于页面上，则对其调用此方法”。

还是我的处理方式完全错误？

Answer 1

您只需将此调用添加到链接中加载的 ajax 中即可。

Answer 2

没有这样的事件。

当您将元素添加到页面时，您需要调用该插件。

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

此示例创建一个新的 元素。如果您从 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');

Answer 3

尚未测试：

$(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();
    }
}

Answer 4

使用 .live 函数完全可以做到这一点。您只需要使用 DOMNodeInserted 事件。

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