title: Modifying the value of a href attribute of an anchor element
body: <p>I have a script that modifies the value of a href attribute of an anchor <code>&lt;a&gt;</code> element. It supposed only triggers below a certain browser window size for mobile development. Below is the script I'm currently working on.</p>
  
  <p>JS - <a href="http://jsfiddle.net/eof8kpsj/1/" rel="nofollow noreferrer">http://jsfiddle.net/eof8kpsj/1/</a></p>
  
  <pre><code>(function($){
      'use strict';
  
  
  
      var mobileMenuDrawer = {
  
          init : function() {
  
              $('.region-primary-menu').addClass('primary-mobile-menu');
              $('.primary-mobile-menu .menu.-primary &gt; .menu-item').addClass('mobile-menu-item');
              $('.primary-mobile-menu .menu.-primary &gt; .mobile-menu-item &gt; .link').off('click').on('click', function() {
                  $(this).closest('.mobile-menu-item').toggleClass('-active');
              })
          },
  
          clear : function() {
              $('.primary-mobile-menu, .mobile-menu-item').removeClass('primary-mobile-menu mobile-menu-item');
          }
      }
  
      var addHash = {
  
          init : function() {
  
              if ($('.region-primary-menu').hasClass('primary-mobile-menu')) {
  
                  $('.primary-mobile-menu .mobile-menu-item &gt; .link').each(function() {
                      // console.log($(this).attr('href'));
                      let currentUrl = $(this).attr('href');
  
                      if($(this).prop('href') != '#' + currentUrl) {
                          $(this).prop('href', '#' + currentUrl);
                      }
                  });
              }
  
              else {
  
                  $('.primary-mobile-menu .mobile-menu-item &gt; .link').each(function() {
  
                      $(this).removeAttr('#');
  
                  });
  
              }
          }
      }
  
  
      $(document).ready(function() {
  
          if ($(window).outerWidth() &lt;= 1024) {
              mobileMenuDrawer.init();
          }
  
          else {
              mobileMenuDrawer.clear();
          }
  
          addHash.init();
  
  
      });
  
      $(window).on('resize', function() {
  
          if ($(window).outerWidth() &lt;= 1024) {
              mobileMenuDrawer.init();
              addHash.init();
          }
  
          else {
              mobileMenuDrawer.clear();
          }
      });
  
  
  
  })(jQuery)
  </code></pre>
  
  <hr>
  
  <p>This logic right here basically modifies the href attribute value on an anchor <code>&lt;a&gt;</code> element. It only adds a hash to the existing <code>href</code> value. The only problem is whenever I try resizing it keeps firing the logic or event. I've already added a <code>condition</code> to the check value if it has a <code>hash</code> contained within the <code>href</code> attribute but the problem still persists.</p>
  
  <pre><code>    var addHash = {
  
          init : function() {
  
              if ($('.region-primary-menu').hasClass('primary-mobile-menu')) {
  
                  $('.primary-mobile-menu .mobile-menu-item &gt; .link').each(function() {
                      // console.log($(this).attr('href'));
                      let currentUrl = $(this).attr('href');
  
                      if($(this).prop('href') != '#' + currentUrl) {
                          $(this).prop('href', '#' + currentUrl);
                      }
                  });
              }
  
              else {
  
                  $('.primary-mobile-menu .mobile-menu-item &gt; .link').each(function() {
  
                      $(this).removeAttr('#');
  
                  });
  
              }
          }
      }
  </code></pre>