Jquery Javascript。功能无法准备好文档

Question

这可能有点复杂，因为涉及很多馄饨代码。我只是在寻找这种行为的可能原因。

我正在使用Jquery Isotope，它可以正常工作。唯一不起作用的是我在文档准备就绪时调用的函数，为什么会这样？ ：

$( document ).ready(function(){

        $('.grid').isotope({
          itemSelector: '.element-item',
          layoutMode: 'packery',

          packery: {
            gutter: 10
          }
        });

        var isotopeFilter = function(f){
            console.log(f);
            $(".grid").isotope({filter: f});
        }

        isotopeFilter('.xp');  // Doesn't Work!!

        $("#filter-basket").on("click", function(){
            isotopeFilter('.basket');  // Works correctly
            });

        $("#filter-all").on("click", function(){
            $(".grid").isotope({ filter: '.xp' });  // Works correctly
        });

        $("#filter-ghacking").on("click", function(){
            $(".grid").isotope({ filter: '.ghacking' });  // Works correctly
        });
    })

我需要在文档加载时调用该函数的原因是因为我想设置默认过滤。