在动态创建的元素上自动调用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

也许是这样的？

超文本标记语言

<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/

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