Question

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/
还有更多......

Answer 1

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

$（closeParent）.on（event，selectorForElement，handler）;

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

然后在此元素上附加处理程序，并指定子元素的选择器（可以随时插入DOM）。只要在与选择器匹配的任何子元素上触发事件，处理程序就会运行。这种方法以非常聪明的方式使用事件冒泡。

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

Answer 2

有一个额外的参数（选择器）来委托它上面的事件：

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

第一个插件，如何让它为动态生成的内容生效

2 个答案: