Question

I have a navigation, something like the following…

<ul>
    <li><a href="page.html" id="hyperlink1">Link</a>
        <ul>
             <li><a href="link.html">Link</a></li>
             <li><a href="link.html">Link</a></li>
             <li><a href="link.html">Link</a></li>
        </ul>
    </li>
</ul>

Id like to disable the parent link with the id ‘hyperlink1’.

Ive tried doing this in jQuery with the following

$("a#HyperLink1").click(function() { return false; });

only it seems to disable all the child links too, has anybody a better solution?

Answer 1

You should prevent the default behaviour of the anchor… by using the preventDefault() method on the Event object. :)…

$("a#HyperLink1").click(function(e) {
    e.preventDefault();
});

This allows the event to bubble through the DOM; which ensure’s any other handlers you’ve got listening for the event to fire, but it prevents the default behaviour being executed (e.g. prevents a link opening for an anchor, prevents a form submission on a submit button).