在Masonry的container.append上获取错误Uncaught TypeError:Object没有方法过滤器

Question

我正在我的网页上实现无限滚动,显示图像.使用砖石对齐图像.最初当页面加载时我只在#containerdiv中放入10个图像.并且使用下面的代码正确对齐所有图像,并且在chrome脚本控制台中没有错误.

var $container = $('#container');
        $container.imagesLoaded(function(){
        $('#container').masonry({
          itemSelector: '.box',
          columnWidth: 200,
          isAnimated: true
        });
    });

但是当用户向下滚动时我会这样做

$.ajax({
         url: "load.php?offset="+1+"&quantity="+1,
         success: function(html){
         if(html){
                  var $container = $('#container');
                  var $test = "<div>even doing this causes error </div>";
              $container.append($test).masonry('appended',$test);
        }
  });

现在,当我向下滚动时,我在chrome控制台中得到以下错误,并且附加的图像会堆叠起来.

 Uncaught TypeError: Object <div class....... </div>  has no method filter

Answer 1

正如我在评论中所说,在使用jQuery时,您获得的错误消息是典型的.filter()是一个jQuery对象的方法.砌体似乎试图在你的$test变量中的任何对象上调用它,在你的例子中,它是一个String对象.基本上,它打电话

"<div>even doing this causes error </div>".filter(...)

这会产生你的错误.

为了使事情有效,您必须将masonry()方法传递给jQuery对象而不是String(或任何其他JavaScript对象).如果您有一个String,例如,作为AJAX调用的结果,您可以通过使用jQuery函数将其转换为jQuery对象.对于你的例子:

$test = $("<div>even doing this causes error </div>");

这将创建一个jQuery div对象,该对象应该可以与砌体一起使用.

另一个提示:您似乎在前面添加了一个$符号.虽然这取决于你,但我建议只使用包含jQuery对象的变量作为前缀$,不要为任何其他变量添加前缀.所以,对于Strings你只需要使用var test = "String";.这是我发现非常有用的惯例.此外,它将使其他人更容易理解您的代码.