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

So glad I finally stumbled upon this question, I kept getting "synchronous xml error" which totally put me on the wrong track... — Alexander Derck
– Alexander Derck, Commented May 17, 2016 at 12:48

Mark Coleman · Accepted Answer · 2011-04-15 12:09:27Z

45

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.

answered Apr 15, 2011 at 12:09

Mark Coleman

40.9k9 gold badges84 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tathagata Over a year ago

That rel="external" ... is worth 6 jQM-n00b-hours

Phill Pafford · Accepted Answer · 2011-04-15 12:16:47Z

6

I think your problem is that you have multiple actions on your button and are using a anchor tag. When clicking the button you're invoking the page to transition to index.html and a onClick event.

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

Might try (might need to remove/add some other attributes)

<input
    type="button"
    name="verify"
    id="verify"
    data-icon="arrow-r" 
    data-iconpos="right" 
    data-theme="a" 
    value="VERIFY" />

and now add a click event

$('#verify').click(function() {
    alert('Button has been clicked');
});

Live Example: http://jsfiddle.net/vRr82/2/

edited Apr 15, 2011 at 12:16

answered Apr 15, 2011 at 12:02

Phill Pafford

85.5k92 gold badges268 silver badges385 bronze badges

3 Comments

RandomCoder Over a year ago

This isn't working. I think it's because jQM hides the <input> button and shows an styled <a> tag instead, so you're clicking the <a> not the <input> (which has the click event).

andho Over a year ago

This is the correct solution. Also just removing the href should also work.

Abdul Rehman Over a year ago

I am using cefsharp browser in my form application. I tried your code which is working fine can you please tell how can I load another HTML page from project resources on this button click OR how can I call a c# method on this button click. Thanks :-)

talonmies · Accepted Answer · 2012-06-11 19:23:22Z

0

I think you should be append data-ajax="false" inside anchor tag.. because in jQuery mobile the page transition is done by AJAX, and for page transition it must be false..

edited Jun 11, 2012 at 19:23

talonmies

72.7k35 gold badges204 silver badges296 bronze badges

answered Jun 11, 2012 at 6:33

Manish Agrawal

5512 gold badges7 silver badges22 bronze badges

Comments

Robin Paul · Accepted Answer · 2012-08-17 15:47:47Z

-1

Use Jquery live Function. That is prety much useful for me

answered Aug 17, 2012 at 15:47

Robin Paul

73 bronze badges

1 Comment

Jack Over a year ago

Besides that I don't see how that answers the question as of jQuery 1.7 live() has been deprecated.

Collectives™ on Stack Overflow

jQueryMobile add click event to a button instead of changing page

4 Answers 4

1 Comment

3 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related