javascript - 附加的同位素打破了剩余的jQuery

我的网站上有一个同位素实例，将其转换为使用附加方法后，似乎破坏了我的javascript函数的其余部分。当我将所有图像最初都放在index.html的标记中时，同位素的过滤以及我为每个图像所拥有的灯箱插件都可以正常工作。现在，我已经按照以下方式实现了（使用Desandro的大多数同位素代码：

HTML：

    <div class="main">
        <div id="filters" class="button-group">
            <p>FILTER:</p>
            <button class="selected" data-filter="*">SHOW ALL</button>
            <button class="" data-filter=".photography">PHOTOGRAPHY</button>
            <button class="" data-filter=".film">FILM</button>
            <button class="" data-filter=".design">DESIGN</button>
        </div>
        <div class="isotope">
            <div class="grid-sizer"></div>
        </div>
    </div>

Javascript：

$(function() {

var $container = $('.isotope');
$container.isotope({
    "itemSelector": ".item",
    "columnWidth": ".grid-sizer"
});

function getItemPhotography(i) {
    var item = '<div class="item photography"><a class = "fluidbox" href =        "img/photography/' + i + 'big.jpg" title = "Click to enlarge"><img src = "img/photography/' + i + '.jpg" class = "image"/></a></div >';
    return item;
}

function getItemDesign(i) {
    var item = '<div class="item design"><a class = "fluidbox" href = "img/design/' + i + 'big.png" title = "Click to enlarge"><img src = "img/design/' + i + '.png" class = "image"/></a></div >';
    return item;
}

var $items = getItems();
// hide by default
$items.hide();
// append to container
$container.append($items);
$items.imagesLoaded().progress(function(imgLoad, image) {
    // image is imagesLoaded class, not <img>
    // <img> is image.img
    var $item = $(image.img).parents('.item');
    $item.show();
    $container.isotope('appended', $item);
});

function getItems() {
    var items = '';
    for (var i = 1; i < 38; i++) {
        items += getItemPhotography(i);
    }
    for (var i = 1; i < 4; i++) {
        items += getItemDesign(i);
    }
    // return jQuery object
    return $(items);
}

});

添加以上内容后，该部分已损坏：

//Filtering for isotope
$(function() {
$('#filters').on('click', 'button', function() {
    var filterValue = $(this).attr('data-filter');
    $container.isotope({
        filter: filterValue
    });
});
$("button").click(function() {
    // Reset them
    $("button").removeClass("selected");
    // Add to the clicked one only
    $(this).addClass("selected");
});
});

//Fluidbox lightbox plugin
$(function() {
    $('.fluidbox').fluidbox();
});

这些图像将附加到同位素容器中并按预期进行布局。但是，现在同位素的过滤已中断，Fluidbox灯箱实例也不起作用。

非常感谢您的帮助。在过去的几个小时中，我一直在为此苦苦挣扎，并开始认为它可能和我的函数初始化或某个地方的分号一样简单。

最佳答案

解决。同位素过滤器函数中缺少$ container的引用。

关于javascript - 附加的同位素打破了剩余的jQuery，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27893984/