jquery - 在动态创建的元素上自动调用 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( ... );
});

在最简单的形式中，我可以在 <a> 中调用插件的点击处理程序，在创建 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

也许是这样的？

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/

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