Problem executing different js functions on span elements click nested inside a HTML hyperlink.

Question

Hi,

I have a couple of span elements inside a HTML hyperlink like this.

<a href="Default.aspx"><span id="span1" onclick="adddata();">Span1<asp:Literal ID="Lblcount" runat="server"></asp:Literal></span><span id="span2" class="removetab ui-icon ui-icon-circle-close" style="float:right; margin: -2px -10px 0px 3px; cursor:pointer;" onclick="removedata();"></span></a>

At the moment upon clicking 'span1' I am executing a js function 'adddata' which invokes a serverside webmethod and upon clicking 'span2' I am executing 'removedata' js function which again invokes a different server side webmethod.

My requirement is that I need to call the 'adddata' js function on hyperlink click as well in addition to 'span1' click but not on 'span2' click.I tried calling the 'adddata' function on hyperlink onclick event instead of the 'span1' onclick event but that is causing the function to be called on 'span2' click as well.

I do not understand how do I execute the same function on hyperlink and span1 click and a different function on span2 click.

Could someone please help?

Thanks

Answer 1

In your span2 cancel the event bubble, change this:

onclick="removedata();"

To this:

onclick="removedata(); return false;"

This prevents a click event in the <span> from bubbling up to the <a> element and triggering it's onclick handler as well.

Answer 2

Or you can enclose "removedata" with the old-school "javascript:void(removedata())" :)