CODEWITHSUNDEEP
javascriptjqueryhtml
ArtVandelay
ArtVandelay

Reputation: 3

Weird link behaviour when clicked

I got a different behaviour on the first click with an anchor tag, it is opposed to click 2nd,3rd,4th..clicks.

Having the href value set to " ", I do not get a HTTP GET on the first click.I Can't see why the first click should have any other behaviour than click no 2 (and upwards).

HTML:

<div id="container"></div>
<div id="menu">
<ul>
    <li><a href="" onclick='alert("clicked")'>Menu Item 1</a></li>
    <li><a href="" onclick='alert("clicked")'>Menu Item 2</a></li>
</ul>

</div>​

Javascript:

$(document).ready(function() {

    $("#container").contextMenu({
        menu: 'menu'
    });
});​

I use jquery plugin to create a rightclick contextmenu

Here a Fiddle to illustrate the issue. The first click does not fire an HTTP GET, but if open the menu again and then click. It fires off as expected.

Upvotes: 0

Views: 135

Answers (2)

Kman
Kman

Reputation: 5001

Use the onSelect event for the contextMenu to do your magic.

$(document).ready(function() {

$("#container").contextMenu({
    menu: 'menu',
    onSelect: function(e) { alert('this is where you want your logic');}
});

});​

Upvotes: 0

U.P
U.P

Reputation: 7442

In your click handler for menu items (which is currently a call to alert()), you should do event.preventDefault(); to stop the browser from following the link. Even though, the href="" is empty, the browser is still thinking it is a call to a new page and reloading the page.

You can also use the old technique of null anchor tag using href="#". This will not cause the browser to load a new URL.

Upvotes: 2

Related Questions