0

アイテムをロードし、jquery 無限スクロール プラグインを使用して、ユーザーがスクロールするにつれてより多くのアイテムをロードするサイトがあります。

ユーザーがアイテムにカーソルを合わせると、アイテムの上にさらに小さな div が表示されます。単純。ホバー時にどの div が表示されるかは、ユーザーがどのページにいるかによって異なります。単純な変数を使用してそれを整理します。

次の js を使用して、表示する div を決定します。例えばホームページから

<script>
  $(".list_item_image").mouseenter(function () {
    $(this).children(".gl_view2").show();
    $(this).children(".gl_relist").show();
  });
  $('.list_item_image').mouseleave(function() {
    $(this).children(".gl_view2").hide();
    $(this).children(".gl_relist").hide();
  });
</script>

div (gl_view2 & gl_relist) は最初にロードされますが、display:none;

これで、この js がフッターに読み込まれ、問題の div の後に確実に配置されます。

一度に 15 個のアイテムを更新するように設定された無限スクロールがあるとしましょう

これはすべて、最初の 15 項目に対して完全に機能します (表示/オーバーレイする必要がある div が表示されることを意味します)。これは、js がロードされ、次の項目がページにロードされたときに js が何の効果も持たないためだと推測しています。

私が使用している無限スクロールで次のアイテムをロードするには：

<nav id="page_nav"><a href="/pages/infinScrollGather.html?page_offset=2&currentpage=homepage"></a></na‌​v>

また、各アイテムの後に js をロードしようとしましたが、まだ最初の 15 に対してしか機能しません。

私も試しましたが、これはまったく機能しませんでした：

$("body").on("mouseenter", ".list_item_image", function () {
...
});

$("body").on("mouseleave", ".list_item_image", function () {
...
});

誰かが前にこのようなものに出くわしたことがありますか? 修正のためのアイデアはありますか？

4

2 に答える 2

1

on()そのようなメソッドでイベント委任を使用する必要があります

$("body").on("mouseenter", ".list_item_image", function () {
  ...
});

$("body").on("mouseleave", ".list_item_image", function () {
  ...
});

これにより、後で ajax を介して DOM に注入された新しい要素にもハンドラーがアタッチされます

古いバージョンの jQuery を使用している場合のみdelegate()、on()それ以外の場合は

于 2012-08-27T09:40:09.663 に答える
0

修正済み（とにかくそう願っています）

jsがラップされていないようです：$(document).ready(function(){ ... });

すべての助けをありがとう。

于 2012-08-27T11:22:35.247 に答える