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按钮。单击事件被调用并执行doSomething()函数，但之后，jQM显示“加载页面错误”的消息。

如何禁止这个错误？在这种情况下，我想要jQM按钮，但不想让它切换页面。

谢谢。

- RandomCoder

---

为什么不移除 href？ - andho

很高兴我终于偶然发现了这个问题，我一直遇到“同步XML错误”，这完全让我走上了错误的轨道... - Alexander Derck

Answer 1

由于您正在使用jQuery，我建议您也使用jQuery来连接事件。 话虽如此，使用e.preventDefault();和e.stopImmediatePropagation();应该可以阻止jQuery移动执行上的默认操作。

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

更新

更好的使用现有标记的方法是只需在您的<a/>中添加rel="external"即可，这样您的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只会停止默认操作。

- Mark Coleman

---

那个rel="external" ... 相当于6个jQM新手小时。 - Tathagata

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');
});

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

- Phill Pafford

---

这个不起作用。我认为是因为jQM隐藏了<input>按钮并显示了一个样式化的<a>标签，所以你点击的是<a>而不是<input>（它具有点击事件）。 - RandomCoder

这是正确的解决方案。只删除 href 也应该可以工作。 - andho

我在我的表单应用程序中使用cefsharp浏览器。我尝试了您的代码，它可以正常工作，请问如何在此按钮单击时从项目资源中加载另一个HTML页面，或者如何在此按钮单击时调用C#方法。谢谢 :-) - Abdul Rehman

Answer 3

我认为你应该在锚点标签内添加data-ajax="false"，因为在jQuery Mobile中，页面转换是通过AJAX完成的，而对于页面转换来说，它必须是false。

- Manish Agrawal

Answer 4

使用Jquery的live函数。这对我来说非常有用。

- Robin Paul

---

除此之外，我并没有看到它如何回答这个问题。从jQuery 1.7开始，live()已被弃用。 - Jack