Question

在jQuery中，有一个功能是使用$(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事件进行操作......

<div style="position: relative;" class="thumb"><img onload="$(this).hoverpulse();"style="position: absolute; top: 0px; left: 0px;" src="hoverpulse_files/beach1.jpg" height="64" width="64"></div>

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

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

2 个答案: