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

Posted 2023-05-09

【中文标题】jQueryMobile 将单击事件添加到按钮而不是更改页面

【英文标题】：jQueryMobile add click event to a button instead of changing page

【发布时间】：2011-08-06 06:48:44

【问题描述】：

<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 按钮，但不希望它改变页面。

谢谢

【问题讨论】：

为什么不删除href？

很高兴我终于偶然发现了这个问题，我不断收到“同步 xm​​l 错误”，这完全让我走错了路......

【参考方案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 将简单地停止默认操作。

【讨论】：

那个 rel="external" ... 值 6 jQM-n00b-hours

【参考方案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/

【讨论】：

这不起作用。我认为这是因为 jQM 隐藏了 按钮并显示了一个样式化的 标记，因此您单击的是 而不是 （具有单击事件）。

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

我在表单应用程序中使用 cefsharp 浏览器。我试过你的代码，它工作正常，你能告诉我如何在这个按钮上从项目资源加载另一个 HTML 页面点击 OR 我如何在这个按钮点击上调用一个 c# 方法。谢谢:-)

【参考方案3】：

我认为你应该在锚标签内附加data-ajax="false".. 因为在 jQuery mobile 中，页面转换是由 AJAX 完成的，而对于页面转换 一定是假的。。

【参考方案4】：

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

【讨论】：

除此之外，我不知道这是如何回答 jQuery 1.7 的问题 live() 一直是 deprecated。