Javascript JQuery无限滚动帮助-将变量传递到第二页

问题：我在我的rails应用程序中实现了一个infinitescroll插件，还有JQuery。它工作得很好，但我面临一个小问题：从第二页开始，

hover

函数不会被触发。此问题与Stackoverflow上的问题非常相似。我应该在回调后再次调用hover函数

我的原始代码：

<script>    
$(function () {
    var $container = $('#container_masonry');

    $container.infinitescroll({
        navSelector: '.pagination'
        nextSelector: '.pagination a',
        itemSelector: '.image_masonry'
        loading: {
        finishedMsg: 'Done loading'
        img: 'http://i.imgur.com/6RMhx.gif'
        }
    },
        // trigger Masonry as a callback
        function(newElements) {
            //hide new items while loading
            var $newElems = $(newElements).css({ opacity: 0 });
            //images must be loaded completely before adding to layout
            $newElems.imagesLoaded(function(){
                //they are loaded and ready to be showed
                $newElems.animate({ opacity: 1 });
                $container.masonry( 'appended', $newElems, true );  
            });
        }
    );

    $container.imagesLoaded(function(){
        $container.masonry({
        itemSelector: '.image_masonry',
        columnWidth: 10,
        isAnimated: true,
        animationOptions: { duration: 400 },
        isResizable: true,
        isFitWidth: true
        });

        $('.image_masonry').hover(
        function(){
        $('.title',this).fadeIn();
        $('.like_num',this).show();
        var buttonDiv= $(this).children('.button');
        buttonDiv.toggle();
        }, function(){
        $('.title',this).fadeOut();
        $('.like_num',this).hide();
        var buttonDiv= $(this).children('.button');
        buttonDiv.toggle();
        }); 
    });

});
</script>

然后呢,

            $newElems.imagesLoaded(function(){
                //they are loaded and ready to be showed
                $newElems.animate({ opacity: 1 });
                $container.masonry( 'appended', $newElems, true );
                //ADD HOVER FCN HERE

但是，简单地添加整个悬停功能并不起作用。我是jQuery的新手，所以我不能完全确定，但我需要将相关变量和函数一起传递给它才能工作（从类似的例子中得到了这个提示，所以我应该添加如下内容

        $('.image_masonry').hover(
        function(SOME-RELATED-VARIABLES){
        $('.title',this).fadeIn();
        $('.like_num',this).show();
        var buttonDiv= $(this).children('.button');
        buttonDiv.toggle();
        }, function(SOME-RELATED-VARIABLES){
        $('.title',this).fadeOut();
        $('.like_num',this).hide();
        var buttonDiv= $(this).children('.button');
        buttonDiv.toggle();
        });

---

但是我需要有人教我应该在那里放些什么。我很努力，因为我对jQuery不太熟悉。我非常感谢您的帮助！

您在第5-11行之间缺少了一些逗号。另外，如果您稍后加载外部内容，您需要使用

on

或

delegate

d来委派悬停事件我在下面添加了

$(function () {
  var $container = $('#container_masonry');

  $container.infinitescroll({
    navSelector: '.pagination',
    nextSelector: '.pagination a',
    itemSelector: '.image_masonry',
    loading: {
      finishedMsg: 'Done loading',
      img: 'http://i.imgur.com/6RMhx.gif'
    }
  },
  // trigger Masonry as a callback
  function (newElements) {
    //hide new items while loading
    var $newElems = $(newElements).css({
      opacity: 0
    });
    //images must be loaded completely before adding to layout
    $newElems.imagesLoaded(function () {
      //they are loaded and ready to be showed
      $newElems.animate({
        opacity: 1
      });
      $container.masonry('appended', $newElems, true);
    });
  });

  $container.imagesLoaded(function () {
    $container.masonry({
      itemSelector: '.image_masonry',
      columnWidth: 10,
      isAnimated: true,
      animationOptions: {
        duration: 400
      },
      isResizable: true,
      isFitWidth: true
    });

    $('body').on({
      mouseenter: function () {
        $('.title', this).fadeIn();
        $('.like_num', this).show();
        var buttonDiv = $(this).children('.button');
        buttonDiv.toggle();
      },
      mouseleave: function () {
        $('.title', this).fadeOut();
        $('.like_num', this).hide();
        var buttonDiv = $(this).children('.button');
        buttonDiv.toggle();
      }
    }, '.image_masonry');
  });

});

第5-11行之间缺少一些逗号。此外，如果您稍后加载外部内容，则需要根据您的版本，使用
on
或
delegate
委派悬停事件。我在下面添加了
on

$(function () {
  var $container = $('#container_masonry');

  $container.infinitescroll({
    navSelector: '.pagination',
    nextSelector: '.pagination a',
    itemSelector: '.image_masonry',
    loading: {
      finishedMsg: 'Done loading',
      img: 'http://i.imgur.com/6RMhx.gif'
    }
  },
  // trigger Masonry as a callback
  function (newElements) {
    //hide new items while loading
    var $newElems = $(newElements).css({
      opacity: 0
    });
    //images must be loaded completely before adding to layout
    $newElems.imagesLoaded(function () {
      //they are loaded and ready to be showed
      $newElems.animate({
        opacity: 1
      });
      $container.masonry('appended', $newElems, true);
    });
  });

  $container.imagesLoaded(function () {
    $container.masonry({
      itemSelector: '.image_masonry',
      columnWidth: 10,
      isAnimated: true,
      animationOptions: {
        duration: 400
      },
      isResizable: true,
      isFitWidth: true
    });

    $('body').on({
      mouseenter: function () {
        $('.title', this).fadeIn();
        $('.like_num', this).show();
        var buttonDiv = $(this).children('.button');
        buttonDiv.toggle();
      },
      mouseleave: function () {
        $('.title', this).fadeOut();
        $('.like_num', this).hide();
        var buttonDiv = $(this).children('.button');
        buttonDiv.toggle();
      }
    }, '.image_masonry');
  });

});

我的猜测可能是错误的，问题在于其他方面。我的猜测可能是错误的，问题在于其他方面。非常感谢！这确实很好地解决了问题。你能解释一下“授权”吗为什么你用mouseenter和leave替换了hover？@MaximusS delegating使任何数据加载到容器中（在本例中为
$（'body'）
）获取添加到其中的任何事件处理程序。通常，一旦脚本完成运行，如果加载了任何新数据，它将不会获得事件处理程序，因为它是在加载脚本之后加载的。委派将获取javascript事件。
hover
是jquery中的一个函数，用于轻松访问事件
mouseenter
和e> mouseleave

你可以在这里看到：非常感谢！它确实很好地解决了这个问题。你能解释一下“委派”以及为什么你用mouseenter和leave替换了hover吗？@MaximusS Deleging使任何数据都可以加载到容器中（在本例中，

$（'body'）

）获取添加到其中的任何事件处理程序。通常，一旦脚本完成运行，如果加载了任何新数据，它将不会获得事件处理程序，因为它是在加载脚本之后加载的。委派将获取javascript事件。

hover

是jquery中的一个函数，用于轻松访问事件

mouseenter

和e> mouseleave您可以在此处看到：