Click Event is triggered twice when a click on a link
<p>my click event is triggered whenever i clicks on the link 
here is my javascript code </p>

<pre><code>$('#switchnavigation').click(function(e){
    console.log('-&gt;'+i);i++;
    //var x=$('#switches').html();
            if(i&lt;2)
    {
        $('#switchnavigation').append('&lt;ul id="navig"&gt;&lt;li class="ui-btn-inner ui-li" style="line-height:20px;padding-left:30px;"&gt;Apps&lt;/li&gt;&lt;li class="ui-btn-inner ui-li" style="line-height:20px;padding-left:30px;"&gt;Videos&lt;/li&gt;&lt;/ul&gt;');
        e.stopPropagation();console.log(i);
        a=setTimeout(rm,3000);

    }
    else
    {
        $('#navig').remove();
        i=0;
    }

    function rm()    
    {
        $('#navig').remove();
        i=0;
        clearTimeout(a);
    }

    e.stopPropagation();
});
</code></pre>

<p>and respective HTML code</p>

<pre><code>&lt;a href="#" data-theme="g" id="switchnavigation"  data-role="button" class="revise-menus custom-b ui-btn ui-btn-icon-left ui-btn-corner-all ui-shadow ui-btn-up-e" data-ajax="false" data-icon="back"&gt;
    &lt;span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true"&gt;
    &lt;span class="ui-btn-text" id="switches"&gt;Books&lt;/span&gt;
    &lt;/span&gt;
&lt;/a&gt;
</code></pre>
