在动态创建的元素上自动调用 jQuery 插件

Question

我需要将 jQuery 插件应用到将根据用户输入创建的 HTML 元素。例如：

<!-- Upon click, this link creates a new div with an id of 'target'. -->
<a id="trigger-a" href="javascript:void(0);">Create a new div</a>

/* This will not work because div#target isn't available yet upon page load. */
$(function() {
  $("div#target").aJQueryPlugin( ... );
});

在最简单的形式中，我可以在创建 div 之后在 的点击处理程序中调用插件。

$(function() {
  $("#trigger-a").click(function() {
    // Create div#target.

    // I can call the plugin here but is there a different, maybe better, way?
    $("div#target").aJQueryPlugin( ... );
  });
});

然而，如果可能的话，我正在寻找更“自动”的东西；也许使用 .on() 在元素可用后自动调用插件？

解释问题： 在 jQuery 中，有没有一种方法可以“监视”某个元素何时可用（即创建后）？如果有，我会调用插件或其他函数作为回调。

Answer 1

您可以使用“DOMNodeInserted”，它不是 jQuery 事件。

$(document).bind('DOMNodeInserted', function(event) {

//write your stuff here to check if desired element was inserted or not.

    alert('inserted ' + event.target.nodeName + // new node
        ' in ' + event.relatedNode.nodeName); // parent
});

Answer 2

也许是这样的？

HTML

<a id="trigger-a" href="javascript:void(0);">Create a new div</a>

<div class="cont"></div>

JS

$("#trigger-a").click(function () {
    var $div = $('<div>', {class: 'target', text: 'text'});
    $('.cont').append($div);
    $div.trigger('divCreate');
});

$('.cont').on('divCreate', 'div.target', function () {
    $(this).append('added by event')
});

http://jsfiddle.net/Q2UYC/

触发自定义事件让您稍后绑定事件处理程序。

Answer 3

如果您必须在调用插件之前检查该元素是否存在，您可能可以尝试这样的操作：

$('#click-here').click(function() {
    $(this).after('<button class="new-button">I am a new button</button>');

    var checkElement = setInterval(function() {
        if ($('.new-button').length) {
            $('.new-button').button({'label': 'I am a new fancy button'});
            clearInterval(checkElement);
        }
    }, 200);
});

您可以看到它正在工作

请注意，.button 函数是 jQuery UI 插件初始化，因此它也应该适用于您需要的插件。您还应该将 setInterval 第二个参数更改为其他值，200 只是为了显示延迟。

Answer 4

jQuery 的 delegate 和 on 对此都很有用。请注意，如果您使用旧版本的 jQuery，则可以使用 delegate，但如果您使用最新版本 (1.7+)，则需要使用 on。

对于这些，您必须使用已加载的元素调用方法，并使用参数指定触发事件的元素。为了使其尽可能高效，该元素应该是最接近动态创建的元素的父元素。

例如，如果单击锚标记，您将 id 为“target”的 div 放入在调用 on 之前已加载的容器中，ID 为“container”，您的 < code>on 调用应该是。

$('#container').on('click', '#target', function(){ $(this).pluginCall(); });

您不能简单地调用 #target div 上的 on ，因为该元素尚未加载。

另一个解决方案是将 $(document).ready() 函数内联到调用插件的动态创建的内容中。在这种情况下，您不需要 on 或 delegate ，但这仅适用于当前加载的元素。在第一个示例中，从任何 ajax 调用创建的 #target 的任何实例都将是 click 处理程序。

Answer 5

我也有兴趣查看插入新 DOM 对象的代码。让我们假设它是这样的：（你真的不应该使用 onclick 处理程序）

$("#trigger-a").click(function() {
    $(this).after('<div id="someDiv"></div>');

    $that = $("#someDiv");

    $that.ajQueryPlugin(...);
});

在没有看到更多信息的情况下我能做的最好的事情就是...

单击触发器，插入新的 div，抓取该对象并在其上运行插件。基本上，您在创建时对 div 进行操作，无需“监视”。

Answer 6

如果您无法在创建元素的同时引入插件（如评论中建议的 andbeyond），无论出于何种原因，我的建议是使用 Brandon Aaron 的 LiveQuery 插件：

http://brandonaaron.net/code/livequery/docs

...Live Query 还能够在匹配新元素时触发一个函数（回调），并在元素不再匹配时触发另一个函数（回调）。这提供了终极的灵活性和无数的用例。

希望这有帮助:)

Answer 7

您可以使用 live() 或 on() 来实现此目的

$(document).ready(function(){
    $('div#target').on('click',function(){});
});