<a> onclick function not working

Question

My function is not fired when the tag is clicked. Here is my code:

HTML:

<div data-role="footer">
    <div data-role="tabstrip" id="tabs"> 
        <a href="views/contacts.html" data-icon="home" id="home">Home</a>  
        <a href="views/settings.html" data-icon="settings" id="settings">Settings</a>
        <a onclick="signOff()" href="views/home.html" data-icon="settings" id="contacts">Log Out</a>
    </div>
</div>

JavaScript:

function signOff() {
    console.log("something");
    VCare.VCareWebService.signOff({cache:false,
        callback:function(xml) { // invoke the service
            // use jQuery to extract information we are interested in
            console.log(xml);
        }
   });
}

Answer 1

You can't have both an onClick function and valid href attribute in <a>. Change your anchor element to:

<a onclick="signOff()" href="javascript:void(0)" data-icon="settings" id="contacts">Log Out</a>

You can redirect the page using javascript if you want to.

Answer 2

Another way is to make sure that your onclick returns a false to stop the default event from running.

<a onclick="signOff(); return false" href="views/home.html" data-icon="settings" id="contacts">Log Out</a>

Or..

<a onclick="return signOff();" href="views/home.html" data-icon="settings" id="contacts">Log Out</a>

function signOff() {
    console.log("something");
    VCare.VCareWebService.signOff({cache:false,
        callback:function(xml) { // invoke the service
            // use jQuery to extract information we are interested in
            console.log(xml);
        }
   });

   return false;
}