第一个插件，我怎样才能让它为动态生成的内容而活答案

【问题标题】：First plugin, how can I make it live for dynamically generated content第一个插件，我怎样才能让它为动态生成的内容而活
【发布时间】：2012-08-27 00:54:41
【问题描述】：

http://blog.jeremymartin.name/2008/02/building-your-first-jquery-plugin-that.html

根据本教程，我创建了我的第一个插件并进行了一些修改。但是，当我在网站上加载新内容时，该插件不适用于动态生成的内容。

我不知道如何让它直播。这些事件已经在使用.on，但是插件的构建不起作用。

这里是 jsFiddle：http://jsfiddle.net/bT4dH/13/

我知道我可以在每次动态添加内容时调用插件，但是由于这很快就会变得混乱，我宁愿避免它，并将其直接集成到插件中。

我开始尝试这个：

$(document).on('DOMNodeInserted', function (e) {
    if (e.target.classname === 'JS_postShrinker') {
         $(e.target).shrinker(options);
    }
});

但它不起作用

更新

请忽略 DOMNodeInserted，我只是在尝试。人们一般如何制作插件？我有同样的问题：

http://code.google.com/p/jquery-watermark/
http://unwrongest.com/projects/elastic/
还有更多...

【问题讨论】：

如果它有多个类，您可能更喜欢$(e.target).is('.JS_postShrinker') 或$(e.target).hasClass('JS_postShrinker')
有没有办法获取被调用的函数类？例如，当我使用 $('.greatClassName').shrinker() 调用插件时。在插件中，我可以获得“greatClassName”吗？这将使它更加干燥...谢谢。
我当然不希望$('.greatClassName').shrinker() 在插入时修改它们。这感觉本质上是错误的。我更喜欢更通用的$('.greatClassName').andFuture().shrinker() 或$('.greatClassName').on('create', function() { $(this).shrinker(); })。这是一个单独的插件的工作，而不是你的收缩器插件。

标签： javascript jquery jquery-plugins dom-events

【解决方案1】：

您可以简单地通过使用.on() 以稍微不同的方式使用委托使其生效。文档explains it in detail。

$(closeParent).on(event, selectorForElement, handler);

您所要做的就是选择一个在您附加处理程序时肯定会成为 DOM 一部分的父级。在最坏的情况下，你可以选择body。

然后将处理程序附加到该元素上，并为子元素指定选择器（可以随时插入到 DOM 中）。每当事件在与选择器匹配的任何子元素上触发时，处理程序都会运行。这种方法非常巧妙地利用了事件冒泡。

编辑：当然这只适用于事件处理。如果您需要在将元素添加到 DOM 时对其进行初始化（调整大小、装饰等），最好在每次发生这种情况时调用插件。这就是大多数插件的工作方式。 DOMNodeInserted 事件不是跨浏览器且已弃用，就像所有 Mutation events 一样，因此您不应使用它。

【讨论】：

+1，虽然这不能解决所有问题，因为他的脚本需要运行一些代码来检查创建元素时需要运行的高度等 - 并且没有事件（DOMNodeInserted 不是跨浏览器，速度慢且已弃用）。
@lqc 谢谢，在我的回答中添加了注释。
感谢您的回答 +1。你知道我怎样才能得到插件选择器吗？例如，当我使用 $('.greatClassName').shrinker() 调用插件时。在插件中，我可以获得“greatClassName”吗？这将使它更加干燥...谢谢。
所以除了每次都调用它之外别无他法（不想再使用 DOMNOdeInserted，因为它已被弃用）？因为我正在使用 JSF (Java) 来执行所有 AJAX 请求，这样做有点像噩梦，而且它会变得混乱。谢谢。
@denislexic 关于选择器：例如this question。关于每次调用它：如果您在客户端编写结构化代码，它不会变得混乱。您可以使用 Backbone.js、Spine、Javascript MVC 等。

【解决方案2】：

有一个额外的参数（选择器）可以将事件委托给它：

$(document).on('DOMNodeInserted',"." + opts.clickZoneClass, function (e) {
    if (e.target.classname === 'JS_postShrinker') {
         $(e.target).shrinker(options);
    }
});

【讨论】：