Isotope filter buttons within bootstrap menu/popup

Question

I'm using Isotope and Bootstrap together. I'm able to get them both working by following the many examples from the web... but the filter buttons stop working as soon as I put them in a select or popup or menu. Is this normal or am I missing something!?

I'm guessing this line is wrong but how!! -> $('.filters a').click(function()

$( function() {
    // init Isotope
    var $container = $('.isotope').isotope({
        itemSelector: '.item',
        filter: '*',
        layoutMode: 'masonry'
    });
    var filters = {};
    // bind filter button click
    $('.filters a').click(function(){
        var $this = $(this);
        // don't proceed if already selected
        if ($this.hasClass('active')) {
            return;
        }
        var $optionSet = $this.parents('.option-set');
        // change selected class
        $optionSet.find('.active').removeClass('active');
        $this.addClass('active');
        // store filter value in object
        var group = $optionSet.attr('data-filter-group');
        filters[group] = $this.attr('data-filter-value');
        // convert object into array
        var isoFilters = [];
        for (var prop in filters) {
            isoFilters.push(filters[prop]);
        }
        var selector = isoFilters.join('');
        $container.isotope({
            filter: selector
        });
        return false;
    });

    // pop up div content
    $('[rel=popover]').popover({ 
        html : true, 
        trigger : 'click',
        placement : 'auto bottom',
        content: function() {
            return $('#'+this.id+'-content').html();
        }
    });
    // popup auto close
    $('[data-toggle="popover"]').popover();
    $('body').on('click', function (e) {
        $('[data-toggle="popover"]').each(function () {
            if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
                $(this).popover('hide');
            }
        });
    });
});

or could it be the html that is not right? I have tried so many combinations!

<div class="btn-group">
    <div><a href="#" id="isotope-catagories" rel="popover" data-container="body" data-toggle="popover" data-original-title="">Catagories</a></div>
...
</div>

<div id="isotope-catagories-content" style="display: none" class="filters option-set button-group" data-filter-group="catagory">
    <a class="active button btn-default" href="#" data-filter-value="" >show all</a>
    <?php $categories = get_categories('orderby=name'); foreach ($categories as $cat) { ?>
        <a  class="button btn-default" href="#" data-filter-value=".<?php echo $cat->slug; ?>"><?= $cat->cat_name; ?></a>
    <?php } ?>
</div>
...

This works perfectly fine as long as the filter buttons are buttons or divs... as soon as I put them in a popup (in this case) it looks fine but nothing happens when the filter buttons are clicked.

The goal is to have Isotope filters for (WP)Catagories, Authors and Tags each within their own popup or menu or hidable div.

Answer 1

I have sort of answered my own question. Instead of using a popup or menu I have put the filter buttons in a second isotope instance by following this answer by hyde

I modified Hyde's example of multiple isotope instances on Fiddle

check out my fiddle

I'm still tuning it but the basic idea (of retractable filter button groups) is working.

<!-- first filter buttons -->
<section id="options" class="clearfix">
    <h3>Filters</h3>
    ...    
</section>
<!-- end first filter buttons -->

<!-- first filter container -->
<div id="container" class="container clearfix">
<--! second filter buttons -->
    <section id="options-new" class="clearfix">
        <h3>Filters</h3>
        ...
    </section>
    <!-- second filter buttons -->
</div>
<--! first filter container -->

<--! second filter container -->
<div id="container-new" class="clearfix">
    ...  
</div>
<--! second filter container -->

I'm still open to input on refinements!! :)