发生事情时调用 jQuery答案

【问题标题】：Call jQuery when something happens发生事情时调用 jQuery
【发布时间】：2013-06-03 22:53:15
【问题描述】：

所以我正在使用 jQuery Masonry，我想在每次加载帖子时调用一些 jQuery：

function manipulate(id) {
    $(id).each(function(){
    if($(this).height()>200){
        $('#container2').append(this);
    } else{
        $('#container').append(this);
    };
  });
};

所以我想每次加载 Masonry 容器中的下一个项目时调用这个函数。这样，它以正确的方式操纵项目。我该怎么做？

更新：砌体描述

Masonry 是一个 Javascript 插件，就像 CSS 浮动强制完美适应 + 无限滚动。如果没有无限滚动，它会完全隐藏第 1 页上不会出现的所有内容，然后在必要时加载它们。这意味着我的函数不会影响任何隐藏的项目，并且需要在 Masonry 加载下一组项目时重新调用，以便它们出现在正确的位置。这可能意味着在不了解 Masonry 的情况下，您不一定可以解决我的问题，但您仍然可以。最后，Masonry 将项目“附加”到 Masonry 容器，然后“显示”它们。所以我想我需要做的是在将它们附加到 Masonry 容器之后，但在显示之前将它们附加到正确的容器中。

砌体代码：

$(window).load(function(){
  var $wall = $('#container');
  $wall.imagesLoaded(function(){
    $wall.masonry({
      itemSelector: '#entry, #entry_photo',
      isAnimated : false
    });
  });

  $wall.infinitescroll({
    navSelector    : '#page-nav',  
    nextSelector   : '#page-nav a',
    itemSelector   : '.entry, .entry_photo',
    bufferPx       : 2000,
    debug          : false,
    errorCallback: function() {
      $('#infscr-loading').fadeOut('normal');  
    }},
    function(newElements) {
      var $newElems = $(newElements);
      $newElems.hide();
      $newElems.imagesLoaded(function(){
        $wall.masonry( 'appended', $newElems,{isAnimated: false}, function(){$newElems.fadeIn('slow');} );
      });
    }); $('.entry').show(500);
  });

我已经尝试将这个函数放在 Masonry 块中，甚至作为 $newElems 函数，看看它是否会在加载更多图像时工作，但它没有，实际上有点破坏它。

如何让它运行 Masonry 通过我的 jQuery 加载的所有新元素，以便将它们附加到正确的容器中？

【问题讨论】：

我试图回答您的问题，但无法回答，因为我不清楚这个问题。如果不是绝对需要了解 masonry 是什么来回答您的问题，那么您可能需要澄清一些细节。例如，什么会触发 jQuery 触发？是否有一个名为“masonry”的 div 会更改数据？由于用户交互，页面上发生了什么变化？
@gibberish, masonry 是一个 jquery 插件，用于执行动态平铺布局，其中平铺大小可以变化。
@gibberish 是的，它也有无限滚动，这是它的相关部分。我添加了砌体的详细描述以及特定于我的问题的砌体的特定部分
伙计，mansonry 文档的第一行是Methods。第一个描述的方法是appendend。它举例说明了如何在新添加的元素上执行某些操作
我知道，我在我的代码中使用它们，但由于某种原因，除非我遗漏了什么，否则它不会运行外部函数。我将为您发布我的砌体代码。在这种情况下我的附加不起作用的原因是它不会将它附加到两个单独的容器中。

标签： javascript jquery jquery-masonry

【解决方案1】：

您只为container 声明了一个 Masonry 实例，container2 没有 Masonry 实例，因此它无法无限滚动任何内容。此外，如果图像尚未加载，($(this).height()>200) 将始终为 false，它将默认为 undefined -> 0 > 200，始终为 false。您需要在放置图像之前等待图像加载，或者在加载内容时以某种方式获取图像的尺寸。您可以默认隐藏它并将其放在container，然后在加载图像时检查高度，然后将其移动到适当的容器并显示它。

【讨论】：

这是完整而正确的答案，应该接受！即使你的问题很不清楚！！！
我知道这一切，我的问题是如何对任何加载的图像执行 jquery，因为当我将函数放入 imagesloaded 函数时，它并没有像我在问题上所说的那样工作已经发布了。
为了使 imagesLoaded 正常工作，从 DOM 树中分离 $newElems，然后执行 $newElems.imagesLoaded(callback)，试试这个！这应该工作
如何将它从 DOM 树中分离出来？
因为运行 $newElems.imagesLoaded(manipulate('.entry')); 目前不起作用

【解决方案2】：

另一个想法是将动作绑定到 jQuery 的 .on() ( http://api.jquery.com/on/ )。 on() 也会绑定未来的元素，假设它们正确地附加到 DOM（例如通过 .append() ）。例如，您可以在尚未创建的元素上绑定 .click() 事件。

最后你可以做一个巧妙的技巧，让 .append() 触发一个事件。然后将该事件的处理程序附加到附加内容的大容器中，因此会自动调用一个函数。这是 on append() do something 的一个很好的例子，还有一个 jsfiddle http://jsfiddle.net/rzRVu/

PS。在旁注中，我看到您的函数将 ID 作为输入，但随后您调用了 .each()。 html代码中的id应该是唯一的。

更新。我错过了你试图通过砖石正确地做到这一点，究竟是什么破坏了？我看到你在一个 jQuery 变量上调用 .imagesLoaded()，那是一个插件吗？

【讨论】：

imagesLoaded() 我相信是砌体的一部分，如果我把它放在砌体中，那么下一个图像不会显示，但是容器会变得更大，就像附加了图像一样。另外，我说的是 ID，但在实际代码中它是一个名为 .entry 的类

【解决方案3】：

所以使用提供的答案中所说的内容，我搞砸了，发现它是如何完成的......所以imagesLoaded 中的'appended' 部分只需要用函数替换！这真的是一个简单的答案......我只需要替换这个：

$wall.masonry( 'appended', $newElems,{isAnimated: false},
function(){$newElems.fadeIn('slow');} );

用这个：

$wall.masonry(manipulate($newElems) ,{isAnimated: false},
function(){$newElems.fadeIn('slow');} );

问题解决了！

【讨论】：