CODEWITHSUNDEEP
jquery-mobile
chmike
chmike

Reputation: 22134

jQuery Mobile: how to make buttons that don't reload the page (href)?

According to the jQuery 1.1.0 Mobile documentation a button should be defined as a link.

<a href="index.html" data-role="button">Link button</a>

This loads the referenced page.

When using the # it reloads the current page.

<a href="#" data-role="button">Action</a>

How could we define a button that is not a link and simply triggers an event handler when an event on it occurs ?

Edit: my interpretation of what I saw was wrong. Clicking on a button with href="#" doesn't reload the page. I should delete the question because it doesn't make sense.

Upvotes: 0

Views: 2561

Answers (1)

Phill Pafford
Phill Pafford

Reputation: 85298

To my understanding the href="#" does not refresh the page, Example:

Here are the jQM Docs:

If you're looking for a custom event, here is an example:

JS:

$( "#myButton" ).bind( "click", function(event, ui) {
    alert('Custom action here');
});​

HTML:

<div data-role="page" id="home">
    <div data-role="content">
        <a href="#" data-role="button" id="myButton">Link button</a>
    </div>
</div>​

Upvotes: 2

Related Questions