click event does not fire when coupled with css :active

Question

I have created a navigation menu where, when clicking on a link, a jquery dialog box opens.

On these same links in my css I have:
.navigationLinkButton:active { background:rgb(200,200,200); }
The dialog box is attached simply with:
$("#link").click(function() {$(this).dialog("open")});

Occasionally (about every 4-5 clicks) when a user clicks the link the dialog box does not open, and only the background color of the link changes. Clicking the link again will open the dialog box. Any ideas why this is happening?

Answer 1

Make sure you haven't used the #link ID more than once on the page.

If your links are <a> elements (I assume they must be since you're using :active) try return false; at the end of your click() handler.

This will disable the default behavior of the link which may be refreshing the page.

$("#link").click( function() {
    $(this).dialog("open");
    return false;
});

Answer 2

$("#link").click(function() {$(this).dialog("open")}

should be

$("#link").click(function(){$(this).dialog("open")});

Also make sure that you only have one #link on the page. If you don't, try using a class instead (".link")