javascript - Getting error on Masonry's container.append Uncaught TypeError: Object has no method filter - Stack Overflo

admin管理员组

文章数量:1287584

I am implementing infinite scroll on my web page which displays images. Images are aligned using masonry. Initially when the page loads I only put 10 images in #container div. And all images get aligned properly using below code with no errors in chrome script console.

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

but as user scrolls down I do

$.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);
        }
  });

Now when ever I scroll down I get below error in chrome console and appended images e up stacked.

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

I am implementing infinite scroll on my web page which displays images. Images are aligned using masonry. Initially when the page loads I only put 10 images in #container div. And all images get aligned properly using below code with no errors in chrome script console.

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

but as user scrolls down I do

$.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);
        }
  });

Now when ever I scroll down I get below error in chrome console and appended images e up stacked.

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

• javascript
• jquery
• html
• jquery-masonry
• infinite-scroll

Share Improve this question Follow edited Sep 9, 2012 at 1:23 PUG asked Sep 9, 2012 at 1:02 PUGPUG 4,4721313 gold badges7676 silver badges118118 bronze badges 6

• Your example code doesn't fit to your error message. The error message you get with this code is Uncaught TypeError: Object $test has no method 'filter'. If you remove the quotes around $test, you get Uncaught TypeError: Object <div>even doing this causes error </div> has no method 'filter'. Obviously, you should pass a jQuery object to masonry() instead of a String. – j0ker Commented Sep 9, 2012 at 1:26
• when you say pass a jquery object what do you mean? $test is a variable – PUG Commented Sep 9, 2012 at 1:30
• Which contains a String ("<div>even doing this causes error </div>"). I have never used masonry but from the error message I guess it tries to call $test.filter(...), which is a method of a jQuery object and doesn't work on a String object. In your example, replace the line above with var $test = $("<div>even doing this causes error </div>");. That makes a jQuery object from the string. The error should go away. – j0ker Commented Sep 9, 2012 at 1:33
• ok, Let me try to create a div element by document.createElement and see how that goes – PUG Commented Sep 9, 2012 at 1:38
• No, you need a jQuery element, not just a JavaScript element. You can create one by document.createElement but then you have to convert it to a jQuery element again. – j0ker Commented Sep 9, 2012 at 1:41

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 13

As I stated in my ment, the error message you get is typical when working with jQuery. filter() is a method of jQuery objects. masonry seems to try to call it on whatever object is inside your $test variable, which, in your example, is a String object. Basically, it calls

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

which produces your error.

To make things work, you have to pass the masonry() method a jQuery object instead of a String (or any other JavaScript object). If you have a String, e.g. as a result of an AJAX call, you can convert that to a jQuery object by using the jQuery function on it. For your example:

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

This creates a jQuery div-object which should be usable with masonry.

Another hint: You seem to prefix all your JavaScript variables with a $ sign. While this is up to you, I would remend to prefix only variables that hold jQuery objects with $ and don't prefix any other variables. So, for Strings you would just use var test = "String";. That's a convention I found quite useful. Also, it will make it easier for other people to understand your code.

本文标签：