我需要将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中，有没有一种方法可以"监视"某个元素何时可用（即在创建之后）？如果有，我会调用插件或其他函数作为回调。
也许是这样的？
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/
通过触发自定义事件，您可以稍后绑定事件处理程序。
您可以使用不是jQuery事件的"DOMNodeInserted"。
$(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
});
如果在调用插件之前必须检查元素是否存在，您可能会尝试以下操作：
$('#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只是为了显示延迟。
jQuery的delegate和on都很好。请注意，如果使用较旧版本的jQuery，则可以使用delegate，但如果使用最新版本（1.7+），则需要使用on。
使用这些方法，必须使用已加载的元素调用方法，并使用参数指定激发事件的元素。为了使其尽可能高效，该元素应该是与动态创建的元素最接近的父元素。
例如，如果单击锚标记，将id为"target"的div放入调用on之前已加载的容器中，id为"container"，则on调用应为.
$('#container').on('click', '#target', function(){ $(this).pluginCall(); });
您不能简单地将on调用到#targetdiv上，因为该元素尚未加载。
另一种解决方案是将$(document).ready()函数内联到动态创建的调用插件的内容中。在这种情况下，您不需要on或delegate，但这只适用于当前加载的元素。在第一个示例中，通过任何ajax调用创建的#target的任何实例都将是click处理程序。
我也很想看看插入新DOM对象的代码。让我们假设它是这样的：（你真的不应该使用onclick处理程序）
$("#trigger-a").click(function() {
$(this).after('<div id="someDiv"></div>');
$that = $("#someDiv");
$that.ajQueryPlugin(...);
});
是我在没有看到更多信息的情况下能做的最好的事情。。。
单击触发器，插入新的div，获取该对象并在其上运行插件。基本上，您在创建时操作的是div，不需要"监视"。
如果你不能在创建元素的同时引入插件（就像他们评论中建议的andbeyond），无论出于什么原因，我的建议是使用Brandon Aaron的LiveQuery插件：
http://brandonaaron.net/code/livequery/docs
Live Query还可以在匹配一个新元素时激发一个函数（回调），在元素不再匹配时激发另一个功能（回调）。这提供了终极的灵活性和数不清的用例。
希望有帮助：）
您可以将live()或on()用于此
$(document).ready(function(){
$('div#target').on('click',function(){});
});