Disable Blogger Generated Anchors with jQuery

Sometimes, I want to make another actions using anchor(<a>) tag, for example, design sum menus and showing floating popup. For doing that, I do not define 'href' attribute on the tag and define actions using JavaScript or jQuery like this.

<script>

$(document).ready(function() {

$('#myid').click(function() {

showPopup(..);

});

);

</script>

<a class="class-name" id="myid"> My Text</a>

It's working well. But a problem occurs when I edit blog post in Compose and HTML mode alternately. When changing the mode from Compose to Edit, the Blogger editing system generates some tags if it is necessary. For example, <br> tags are generated for new lines if edition option for new line is set to use <br>.

For the anchor tag, Blogger generates 'href' attribute with some strange URL with the blogger ID. Current page is reloaded when the link is clicked after user defied action is performed. In upper example, a floating popup is shown in a second and the page is refreshed.

I can modify the code in HTML mode on HTML editor, but sometime it is forgotten and if many pages have same problem, it is a terrible work.

My solution is to remove default actions (i.e. move to destination URL) of anchor tags. We can use jQuery method preventDefault() on Event object. If the method preventEvent() is called, the default action of the event will not be triggered. Now upper codes can be modified as follows. If you want to prevent events on all anchor tags, you can just replace '#myid' to 'a' on JavaScript codes.

<script>

$(document).ready(function() {

$('#myid').click(function(e) {

e.preventDefault();

showPopup(..);

});

);

</script>

<a class="class-name" id="myid"> My Text</a>