Как привязать пользовательское событие к элементам, загруженным на лету из другого скрипта?

Question

У меня есть скрипт бесконечной прокрутки, который работает на мой тамблер . Он загружает изображения, когда я прокручиваю страницу вниз. Однако я хочу, чтобы изображения исчезали в , а не появлялись внезапно.

Я нашел этот удивительный плагин под названием waypoints , который делает подобные вещи. И это работает, но только на первых загруженных изображениях. После этого он не распознает вновь загруженные изображения.

Я знаю, что "live" работает только на определенных функциях jQuery. И bind может быть лучше, так как вы можете использовать пользовательские функции. Но тогда я все еще, очевидно, должен вызвать сценарий, и это то, что я не знаю, как это сделать. Это означало бы, что мне придется взломать скрипт tumblr, который выполняет бесконечную прокрутку, , и там страшно , скорее javascript, чем jQuery.

Может быть, вы могли бы порекомендовать лучший способ сделать это?

Вот код, который работает для первых десяти изображений:

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

Хотел бы я просто сделать что-то вроде этого:

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

Спасибо.

PS содержимое miiiiildly nsfw. На самом деле это sfw, так как одна слегка сексуальная картина даже не видна, и она полностью внизу. Приветствия.

Answer 1

Дело не в том, что live не работает с пользовательскими событиями, а в том, что путевые точки запускают свое событие только на элементах, для которых .waypoint() вызвано. Поэтому вам нужно будет сделать этот вызов после того, как новый контент будет загружен независимо.

Поскольку о взломе скрипта infinitescroll не может быть и речи, я предлагаю вам попробовать использовать плагин jquery.inview вместо Waypoints. Способ структурирования inview создает событие, которое запускается каждым элементом, поэтому вы можете использовать .live, .delegate.