jQueryMobile将单击事件添加到按钮而不是更改页面

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>

我使用上面的代码,它是一个带有onClick()设置的jQM按钮.调用onclick并执行doSomething()但在此之后,jQM显示"错误加载页面"消息.

我怎么能抑制错误？在这种情况下,我想要jQM按钮,但不希望它改变页面.

谢谢

Answer 1

由于您使用的是jQuery,我建议您使用jQuery来连接您的事件.据说使用e.preventDefault();并且e.stopImmediatePropagation();应该阻止jQuery mobile执行默认操作<a/>.

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

更新

使用现有标记的更好方法是简单地添加rel="external"到您的<a/> 并且您的onclick行为应该正确.

<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>

这将起作用,因为jQuery Mobile会将链接视为普通<a/>标记,返回false将简单地停止默认操作.

Answer 2

我认为您的问题是您的按钮上有多个操作并且正在使用锚标记.单击按钮时,您将调用页面以转换到index.html和onClick事件.

<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>

可能会尝试(可能需要删除/添加一些其他属性)

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

现在添加一个点击事件

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

实例:http://jsfiddle.net/vRr82/2/