javascript - Isotope filter buttons within bootstrap menu/popup -

i'm using isotope , bootstrap together. i'm able them both working following many examples web... filter buttons stop working put them in select or popup or menu. normal or missing something!?

i'm guessing line wrong 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 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 array         var isofilters = [];         (var prop in filters) {             isofilters.push(filters[prop]);         }         var selector = isofilters.join('');         $container.isotope({             filter: selector         });         return false;     });      // pop 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 html not right? have tried 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 $cat) { ?>         <a  class="button btn-default" href="#" data-filter-value=".<?php echo $cat->slug; ?>"><?= $cat->cat_name; ?></a>     <?php } ?> </div> ... 

this works fine long filter buttons buttons or divs... put them in popup (in case) looks fine nothing happens when filter buttons clicked.

the goal have isotope filters (wp)catagories, authors , tags each within own popup or menu or hidable div.

i have sort of answered own question. instead of using popup or menu have put filter buttons in second isotope instance following this answer hyde

i modified hyde's example of multiple isotope instances on fiddle

check out fiddle

i'm still tuning basic idea (of retractable filter button groups) 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 input on refinements!! :)