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之后调用<a>的点击处理程序中的插件。

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

您可以看到它正常工作here。

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

Answer 4

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

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

例如，如果单击锚标记，则将id为“target”的div放入已调用on之前已加载的容器中，其id为“container”，即{ {1}}应致电。

on

你不能简单地将$('#container').on('click', '#target', function(){ $(this).pluginCall(); });调用到#target div上，因为该元素尚未加载。

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

Answer 5

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

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

    $that = $("#someDiv");

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

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

单击触发器，插入新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(){});
});

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

7 个答案:

HTML

JS