Question

I have a link

<ul class="sub_menu">
    <li><a href="caps">Caps</a></li>
    <li><a href="jeans">Jeans</a></li>
    <li><a href="shorts">Shorts</a></li>
    <li><a href="foootwear">Footwear</a></li>
</ul>

I want to grab the href value, I tried the following code:

$(document).ready(function() {
    $('ul.sub_menu a').click(function() {
        var txt = $(this).attr('href');
        alert(txt);
    )};
)};

but I get this error

 The requested URL /new/caps was not found on this server.

I don’t want to grab the text, I have succeeded with that using .text();, I want the href value.

Answer 1

Add return false to the end of your click event handler to stop the execution of the link.

$(document).ready(function() {
    $('ul.sub_menu a').click(function() {
        var txt = $(this).attr('href');
        alert(txt);
        return false;
    )};
)};

You can also use event.preventDefault() if you want the event to still propagate up the DOM:

$(document).ready(function() {
    $('ul.sub_menu a').click(function(event) {
        var txt = $(this).attr('href');
        alert(txt);
        event.preventDefault();
    )};
)};

Note: In a jQuery event handler, return false; is the same as calling event.preventDefault().stopPropagation();.