Question

I a using jquery mobile to create a mobile web page. I defined a button and an onclick event. After the onclick function is carried out my page is automatically refreshed. Does anyone know why this is happening or how i can stop it?

my button declaration:

<button id="rateButton" data-theme="a" data-icon="star" data-iconpos="right" onclick="BtnRatePressed();">Rate</button>

function:

function BtnRatePressed() {
    var rateBtn = document.getElementById('rateButton');
    rateBtn.style.visibility = 'hidden';
    alert("yeh");

}

I receive the alert and then the page refreshes.

Answer 1

We need code for this to find out. Any way you can supply us with a live demo?

You might have forgotten to return false at the end of the onclick event. Neglecting the return of false will make the browser to execute the href of the link anyway, which might appear as a page reload.

As I stated, seeing the live example, add return false to either

your BtnRatePressed function

function BtnRatePressed()
{
    var rateBtn = document.getElementById('rateButton');
    rateBtn.style.visibility = 'hidden';
    alert("yeh");
    return false;
}

or within the onclick statement.

<button id="rateButton" data-theme="a" data-icon="star" data-iconpos="right" onclick="BtnRatePressed(); return false;">Rate</button>