0

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

您能否举一个将其与自定义函数/插件一起使用的示例，例如hoverpulse。

我面临的另一个问题是，它还期望将一些值传递给该函数，该函数在选择器上调用时由 hoverpulse 返回。 

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

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

4

2 回答 2

2

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

“如果我只使用 $(selector).hoverpulse() 是否会重新分配相同的功能......因此在某些情况下会执行两次效果？”

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

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

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

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

于 2012-11-09T06:33:51.580 回答
1

嗨，当您动态添加图像时，只需以他们有这样的 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>

它可以正常工作，无需对代码进行任何其他更改...

于 2012-11-09T06:36:26.600 回答