jQueryMobile add click event to a button instead of changing page

Question

<p><a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="right" data-theme="a" onclick="doSomething(); return false">VERIFY</a></p>

I am using the above code which is a jQM button with the onClick() set. The onclick is called and doSomething() is executed but after that, jQM shows the "error loading page" message.

How can I supress the error? In this case I want the jQM button but don't want it to change page.

Thanks

Answer 1

Since you are using jQuery I would recommend to use jQuery to wire up your events as well. With that being said using e.preventDefault(); and e.stopImmediatePropagation(); should stop jQuery mobile from performing the default action on the <a/>.

$("#verify").click(function (e) {
    e.stopImmediatePropagation();
    e.preventDefault();
    //Do important stuff....
});

Update

The better way to use your existing markup would be to simply add rel="external" to your <a/> And your onclick should behave correctly.

<p>
  <a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="right" data-theme="a" onclick="doSomething(); return false" rel="external">VERIFY</a>
</p>

This will work since jQuery Mobile will treat the link as a normal <a/> tag and return false will simply stop the default action.