title: Cannot read property 'on' of null
body: <p>I'm trying to get a bit of jQuery working for a ripple effect when you click the button.</p>
  
  <p>Right now it pulls jquery in the document head, and then after the button there is</p>
  
  <pre><code>&lt;script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>and then</p>
  
  <pre><code>(function(){
  
  $(".solar-button").on("click", function(e){
  
      var x = e.pageX;
      var y = e.pageY;
      var clickY = y - $(this).offset().top;
      var clickX = x - $(this).offset().left;
  var box = this;
  
  var setX = parseInt(clickX);
  var setY = parseInt(clickY);
  $(this).find("svg").remove();
  $(this).append('&lt;svg&gt;&lt;circle cx="'+setX+'" cy="'+setY+'" r="'+0+'"&gt;&lt;/circle&gt;&lt;/svg&gt;');
  
  setTimeout(function(){
    var c = $(box).find("circle");
    c.animate(
      {
        "r" : $(box).outerWidth()
      },
      {
        easing: "easeOutQuad",
        duration: 500,
          step : function(val){
                      c.attr("r", val);
                  }
      }
    );
  
  });
  
  });
  
  }());
  </code></pre>
  
  <p>For some reason I'm getting the error </p>
  
  <blockquote>
    <p>"cannot read property 'on' of null".</p>
  </blockquote>
  
  <p>If I put jQuery right above the call for jquery easing then it works... however then my sites menu doesn't work since jQuery is also called in the head. Not sure why it's not able to use the same jQuery in the head of my document.</p>
  
  <p>The link I'm currently trying this on is <a href="http://bftgateopeners.com/store/information/ecosol-solar-powered-system.html" rel="nofollow noreferrer">here</a> for the button at the bottom. Having no luck. I'd try this in a fiddle but putting everything that could be conflicting with jQuery in a Magento site is insane.</p>