如何绑定一个自定义事件来装载从另一个脚本飞的元素？ [英] How to bind a custom event to elements loaded on the fly from another script?

问题描述

我有一个无限滚动脚本，它适用于我的tumblr 。
它加载图像，我向下滚动页面。
不过我期待在图像淡出，而不是突然出现。

I have a infinite scroll script which works for my tumblr. It's loading images as I scroll down the page. However I'm looking to have the images fade in rather than suddenly appear.

我发现这个所谓的真棒插件航点这确实这样的事情。和它的作品，但只在第一次加载的图像。在此之后，它不承认新加载的图片。

I've found this awesome plugin called waypoints which does this sort of thing. And it works, but only on the first loaded images. After that, it's not recognising the newly loaded images.

我知道活只适用于特定的jQuery功能。和绑定可能会更好，因为你可以使用自定义功能。但后来我还是显然要触发中的脚本，这是我不知道该怎么办。这意味着我必须破解tumblr脚本做无限滚动，，这是可怕的在那里，JavaScript的，而不是jQuery的。

I know that "live" only works on certain jQuery functions. And bind might be better as you can use custom functions. But then i still apparently have to trigger the script, and this is what i dont know how to do. This would mean i'd have to hack the tumblr script which does the infinite scroll, and it's scary in there, javascript rather than jQuery.

也许你可以建议这样做的更好的办法？

Maybe you could recommend a better way of doing this?

下面是code，在最初的十张图片作品：

Here is the code that works for the first ten images:

$('.theImage').waypoint(function() {
   $(this).animate({opacity: 1}, 'slow');
});

我希望我可以做这样的事情：

I wish i could just do something like this:

$（'。theImage'）。绑定（航点功能（）{
   $（本）.animate（{不透明度：1}，'慢'）;
}）;

$('.theImage').bind("waypoint", function() { $(this).animate({opacity: 1}, 'slow'); });

感谢您。

PS内容miiiiildly NSFW。事实上，因为一个温和的性感照片的SFW甚至不可见的，它的底部一路。干杯。

PS the content is miiiiildly nsfw. In fact its sfw since one mildly sexy picture is not even viewable and it's all the way at the bottom. Cheers.

推荐答案

这不是生活不与自定义事件工作，但更多的航点只触发它的事件上有 .waypoint元素（）调用它。所以，你需要拨打这个电话，无论新内容加载之后。

It's not that live doesn't work with custom events, but more that Waypoints only fires it's event on elements that have had .waypoint() called on it. So you would need to make this call after the new content has loaded regardless.

由于黑客infinitescroll脚本是出了问题，我建议你尝试使用 jquery.inview 插件而不是航点。 inview是结构化的方式它会创建一个由每一个元素触发，因此您可以使用事件 .live ， .delegate

Since hacking the infinitescroll script is out of the question, I suggest you try using the jquery.inview plugin instead of Waypoints. The way inview is structured it creates an event that is triggered by every element so you can use .live, .delegate.

这篇关于如何绑定一个自定义事件来装载从另一个脚本飞的元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！