在动态添加的元素上应用带有选项的jquery插件/函数

在jQuery中，有一个function是使用$(document).on(...)将事件也分配给html中新添加的元素，例如在ajax请求之后。

你能给出一个使用自定义函数/插件的示例，例如hoverpulse 。

我面临的其他问题是它也期望将一些值传递给hoverpulse在选择器上调用它时返回的那个函数。

  $(document).ready(function(){ $('div.thumb img').hoverpulse({ size: 40, speed: 400 }); }); 

如何通过jQuery的on（）方法传递这种函数的选项？ 请注意，选项不会传递给处理程序，而是传递给函数hoverpulse本身。

Answer 1

.on()方法用于分配事件处理程序，考虑使用它来应用插件没有意义。

“如果我只使用$（选择器）.hoverpulse（），它会重新分配相同的函数……因此在某些情况下执行效果两次？”

是的，如果您使用相同的选择器，它会将插件应用于当时与选择器匹配的所有元素，包括之前已经完成的元素。 对于一些可能并不重要的插件，但对于其他插件，它会。 我并不熟悉.hoverpulse() ，但可以想象，如果你为该元素多次调用.hoverpulse() ，它可能会在同一个元素上多次执行该效果。

我想到的第一个解决方法是向已经应用了插件的元素添加一个类，然后下次将自己限制为没有该类的元素：

 $('div.thumb img').not(".HPapplied") .hoverpulse({ size: 40, speed: 400 }) .addClass("HPapplied"‌​); 

鉴于您（可能）需要在文档就绪和Ajax成功回调中应用相同的选项，您可能希望将上述语句放入函数中，然后从两个位置调用该函数。 这样，如果您需要更改其中一个选项，您只需在一个地方更改它。

Answer 2

嗨，当您动态添加图像时，只需按照这样的onload事件进行操作即可……

它没有任何其他代码更改工作正常…