2

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，我只是在尝试。人们一般如何制作插件？我有同样的问题：

4

2 回答 2

3

.on()您可以通过使用委托的不同方式简单地使其生效。该文档详细解释了它。

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

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

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

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

于 2012-09-01T13:58:08.963 回答
-1

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

$(document).on('DOMNodeInserted',"." + opts.clickZoneClass, function (e) {
    if (e.target.classname === 'JS_postShrinker') {
         $(e.target).shrinker(options);
    }
});
于 2012-09-01T13:57:12.647 回答