title: location href returns as undefined
body: <p>I have this Ripple effect code: </p>
  
  <pre><code>(function (window, $) {
  
    $(function() {
  
  
      $('.ripple-white').on('click', function (event) {
        event.preventDefault();
  
        var $div = $('&lt;div/&gt;'),
            btnOffset = $(this).offset(),
              xPos = event.pageX - btnOffset.left,
              yPos = event.pageY - btnOffset.top;
  
  
  
        $div.addClass('ripple-effect');
        var $ripple = $(".ripple-effect");
  
        $ripple.css("height", $(this).height());
        $ripple.css("width", $(this).height());
        $div
          .css({
            top: yPos - ($ripple.height()/2),
            left: xPos - ($ripple.width()/2),
            background: $(this).data("ripple-color")
          }) 
          .appendTo($(this));
  
        window.setTimeout(function(){
          $div.remove();
          location.href = $(this).attr('href');
        }, 800);
  
      });
  
    });
  
  })(window, jQuery);
  </code></pre>
  
  <p>Which is dynamically used for Wordpress post listing: </p>
  
  <pre><code>&lt;?php $the_query = new WP_Query( 'posts_per_page=50' ); ?&gt;
  &lt;?php while ($the_query -&gt; have_posts()) : $the_query -&gt; the_post(); ?&gt;
  &lt;div class="flex-3col"&gt;&lt;a class="ripple-white" href="&lt;?php the_permalink() ?&gt;"&gt;&lt;h3 class="single-menu"&gt;&lt;?php the_title(); ?&gt;&lt;/h3&gt;&lt;/a&gt;&lt;/div&gt;
  &lt;?php endwhile; wp_reset_postdata(); ?&gt;
  </code></pre>
  
  <p>For some reason I'm getting the location.href as UNDEFINED. I've also tried:</p>
  
  <pre><code>$('a', this).attr("href"); 
  </code></pre>
  
  <p>Any advice what I'm doing wrong here?</p>