title: How to properly change href attribute with jQuery?
body: <p>I am trying to change <code>href</code> attribute of a link <code>.filter</code> on mouseover. The link has a <code>data-href</code> attribute that contains partial string that is to be merged with another partial string contained somewhere else, and placed as value of <code>href</code>.</p>
  
  <p>The outcome I am getting from the below script is nothing happens on the mouseover. When I move the mouse over the element second time, new updated URL appears in the status bar.</p>
  
  <pre><code>$('.filters-nav .filter:not([data-href=""])').on( 'mouseover' , function() {
  
      var href = $(this).parents('.filters-scroll').attr( 'data-base' );
  
      $(this).attr( 'href' , href + $(this).attr( 'data-href' ) );
  
      $(this).attr( 'data-href' , '' );
  
      //return false;
  });
  </code></pre>
  
  <p>How to change URL on the first mouseover. Here is the <a href="http://jsfiddle.net/4QAwF/1/" rel="nofollow">jsfiddle</a></p>
  
  <p>I am using Firefox 27.*</p>