title: Click events from two scripts on same element?
body: <p><strong>Edit:</strong> I think I got the solution! I want to try and fix this myself before I ask for further help = )</p>
  
  <p>First script inhibits the second one from functioning as the click event from the first one overides the second one. Because the second one does not function it is impossible to open the drop down menu to select a list item to trigger the first scripts click.</p>
  
  <p>What I tried was replacing all return false statements with event.stopPropagation(). Didnt work however. Tried re-ordering my scripts but that failed as well. I was thinking of making my second script target another parent div but that didnt work either.I also tried event.stopImmediatePropagation() and .bind methods. </p>
  
  <p>Any idea?</p>
  
  <p>First script that makes the drop down function. Contains click event.</p>
  
  <pre><code>    function DropDown(el) {
          this.f = el;
          this.placeholder = this.f.children('span');
          this.opts = this.f.find('ul.dropdown &gt; li');
          this.val = '';
          this.index = -1;
          this.initEvents();
      }
      DropDown.prototype = {
          initEvents : function() {
              var obj = this;
  
              obj.f.on('click', function(event){
                  $(this).toggleClass('active');
                  return false;
              });
  
              obj.opts.on('click',function(){
                  var opt = $(this);
                  obj.val = opt.text();
                  obj.index = opt.index();
                  obj.placeholder.text(obj.val);
              });
          },
          getValue : function() {
              return this.val;
          },
          getIndex : function() {
              return this.index;
          }
      }
  
      $(function() {
  
          var f = new DropDown( $('#f') );
  
          $(document).click(function() {
              // all dropdowns
              $('.filter-buttons').removeClass('active');
          });
  
      });
  </code></pre>
  
  <p>Second script that does the filtering, also contains click event:</p>
  
  <pre><code>jQuery(document).ready(function(e) {
      var t = $(".filter-container");
      t.imagesLoaded(function() {
          t.isotope({
              itemSelector: "figure",
              filter: "*",
              resizable: false,
              animationEngine: "jquery"
          })
      });
      $(".filter-buttons a").click(function(evt) {
    var n = $(this).parents(".filter-buttons");
          n.find(".selected").removeClass("selected");
          $(this).addClass("selected");
          var r = $(this).attr("data-filter");
          t.isotope({
              filter: r
          });
      evt.preventDefault();
  });
      $(window).resize(function() {
          var n = $(window).width();
          t.isotope("reLayout")
      }).trigger("resize")
  });
  </code></pre>
  
  <p>html structure</p>
  
  <pre><code>&lt;div id="f" class="filter-buttons" tabindex="1"&gt;
                      &lt;span&gt;Choose Genre&lt;/span&gt;
                      &lt;ul class="dropdown"&gt;
                          &lt;li&gt;&lt;a href="#" data-filter="*" class="selected"&gt;All&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#" data-filter=".electronic"&gt;Electronic&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#" data-filter=".popular"&gt;Popular&lt;/a&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
  </code></pre>