this.href not returning href

4 Views

I am not sure if it is because I am using WordPress but the this.href is not returning the href on the items that have them (for example on “contact” it returns http://www.domain.net/undefined opposed to http://www.domain.net/contact). If I remove the script the nav loads the href just fine.

Here is the JS

Read More
$(document).ready(function() {
      $('#page-wrap').delay(500).fadeIn(1000);

      $(".menu-item").click(function(event){
        event.preventDefault();
        linkLocation = this.href;
        $("#page-wrap").fadeOut(1000, redirectPage);        
    });

    function redirectPage() {
        window.location = linkLocation;
    }
});

Here is the php wordpress file 

<div id="nav_wrap">
        <div id="nav"><?php wp_nav_menu( array( 'theme_location' => 'header-menu',) ); ?></div>
    </div>

Here is what wordpress returns in html format 

<div id="nav_wrap">
        <div id="nav"><div class="menu-main-container"><ul id="menu-main" class="menu"><li id="menu-item-13" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13"><a href="http://www.domain.net">Home</a></li>
<li id="menu-item-28" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-28"><a>Company</a>
<ul class="sub-menu">
    <li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32"><a href="http://www.domain.net/jobs/">Careers</a></li>
</ul>
</li>
<li id="menu-item-29" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-29"><a>Portfolio</a>
<ul class="sub-menu">
    <li id="menu-item-65" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-65"><a href="http://www.domain.net/breweries/">Breweries</a></li>
</ul>
</li>
<li id="menu-item-30" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-30"><a>Retailer Resources</a></li>
<li id="menu-item-31" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-31"><a>Community</a></li>
<li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15"><a href="http://www.domain.net/contact/">Contact</a></li>
</ul></div></div>
    </div>
Post Views: 4

Related posts

Leave a Reply

5 comments

  1. This is because you are running the selector on .menu-item which is a <li>. It has no href attribute.

    You need the select the <a> tag inside your <li> tag. This should do it:

    $(".menu-item a").click(function(event){
    event.preventDefault();
    linkLocation = this.href;
    $("#page-wrap").fadeOut(1000, redirectPage);        
});

    A bonus of doing this vs. the other answers of selecting <li> and then the child <a> is that this will only run when the user clicks the actual link. The others will run when anywhere in the <li> is clicked, which depending on your CSS, could be outside the actual link space.

    jsFiddle with working example

  2. Menu item is not returning the href because it’s an <li/>.

    You need to target the <a> child element of the menu item.

    linkLocation = $(this).children('a').attr('href');

  3. Change linkLocation = this.href; to linkLocation = $(this).attr('href'); or if that does not work try linkLocation = $(this).find('a').attr('href');

  5. Looks like your href property is only associated with the <a> tags, but the click event is being added to the <li> tags. Change your code to $(".menu-item a").click ...