Javascript jQueryMobile 将单击事件添加到按钮而不是更改页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5676258/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQueryMobile add click event to a button instead of changing page
提问by RandomCoder
<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>
I am using the above code which is a jQM button with the onClick() set. The onclick is called and doSomething() is executed but after that, jQM shows the "error loading page" message.
我正在使用上面的代码，它是一个带有 onClick() 设置的 jQM 按钮。调用 onclick 并执行 doSomething() 但之后，jQM 显示“错误加载页面”消息。
How can I supress the error? In this case I want the jQM button but don't want it to change page.
我怎样才能抑制错误？在这种情况下，我想要 jQM 按钮但不希望它更改页面。
Thanks
谢谢
回答by Mark Coleman
Since you are using jQuery I would recommend to use jQuery to wire up your events as well. With that being said using e.preventDefault();and e.stopImmediatePropagation();should stop jQuery mobile from performing the default action on the <a/>.
由于您使用的是 jQuery，我建议您也使用 jQuery 来连接您的事件。话虽如此，使用e.preventDefault();并且e.stopImmediatePropagation();应该阻止 jQuery mobile 在<a/>.
$("#verify").click(function (e) {
e.stopImmediatePropagation();
e.preventDefault();
//Do important stuff....
});
Update
更新
The better way to use your existing markup would be to simply add rel="external"to your <a/>And your onclickshould behave correctly.
使用现有标记的更好方法是简单地添加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>
This will work since jQuery Mobile will treat the link as a normal <a/>tag and return false will simply stop the default action.
这将起作用，因为 jQuery Mobile 会将链接视为普通<a/>标签，返回 false 将简单地停止默认操作。
回答by Phill Pafford
I think your problem is that you have multiple actions on your button and are using a anchor tag. When clicking the button you're invoking the page to transition to index.html and a onClick event.
我认为您的问题是您的按钮上有多个操作并且正在使用锚标记。单击按钮时，您正在调用页面以转换到 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>
Might try (might need to remove/add some other attributes)
可能会尝试（可能需要删除/添加一些其他属性）
<input
type="button"
name="verify"
id="verify"
data-icon="arrow-r"
data-iconpos="right"
data-theme="a"
value="VERIFY" />
and now add a click event
现在添加一个点击事件
$('#verify').click(function() {
alert('Button has been clicked');
});
Live Example: http://jsfiddle.net/vRr82/2/
现场示例：http: //jsfiddle.net/vRr82/2/
回答by Manish Agrawal
I think you should be append data-ajax="false"inside anchor tag..
because in jQuery mobile the page transition is done by AJAX, and for page transition
it must be false..
我认为你应该data-ajax="false"在锚标签内附加..因为在 jQuery mobile 中页面转换是由 AJAX 完成的，对于页面转换它必须是 false..
回答by Robin Paul
Use Jquery live Function. That is prety much useful for me
使用 Jquery 实时功能。这对我很有用
