【发布时间】:2016-01-16 06:35:56
【问题描述】:
奇怪的问题,显然在 jquery mobile 中并不少见。我有一个包含两项的列表视图弹出窗口,旨在允许用户通过<a href="someurl.com"> 切换视图。每个选项都旨在在同一页面上显示 json 数据。我不希望href 将查看者带到另一个页面,所以我尝试使用event.preventdefault()。
但经过大量研究,我仍然无法阻止 href 跳转到 google.com,即使(我认为)我正确使用了 event.preventdefault();。
这是相关的html:
<div data-role='popup' id='popupSwitchView' data-theme='none'>
<ul data-role='listview'>
<legend>Choose a view</legend>
<li><a href='javascript:;' data-role='button' data-transition='fade' data-mini='true' class='ui-btn-active switchview' id='ABC' name='theView' value='ABC'>ABC</a>
</li>
<li><a href='http://google.com' data-role='button' data-transition='fade' data-mini='true' class='switchview' id='DEF' name='theView' value='DEF'>DEF</a>
</li>
</ul>
</div>
...这里是jquery:
$('#DEF').on('click', function () {
event.preventDefault();
我想知道这是否是我使用选择器的方式,但我用相同的代码here 测试了选择器,看来我的选择器没问题。
Chrome 控制台未显示任何错误。对我在这里缺少的东西有什么想法吗?
编辑
我忽略了上面的 html 和 jquery 是 php 变量$html_jq 的一部分,它是从另一个 php 文件中回显的。
即file1.php 与$html_jq 相呼应,file2.php 中定义。
【问题讨论】:
-
你需要把 --event -- 放在括号内,这样它就会被拾取 -- $('#DEF').on('click', function (event) { -- 也可以试试-- event.stopImmediatePropagation() -- 它阻止其余的处理程序被执行并防止事件在 DOM 树中冒泡。
-
@Tasos 谢谢,是的,试过了——也试过 $('#DEF').on('click', function (e) { e.event.preventDefault();...都没有工作。不幸的是 event.stopImmediatePropagation() 也没有。
-
是的,它们并不总是有效。您可以做的是设置一个标志,例如 onclick 您将一个变量设置为 on 状态。然后将超时设置为一秒左右以将开启状态清除为关闭。现在在您的其他点击功能中检查 - 如果状态处于打开状态,则不要运行代码。这是一种解决方法,效果很好
-
再次感谢。我的编辑可能会对此有所了解(即 html 和 jq 位于正在回显的 php 变量中)。我昨天不认为它是相关的,但我开始怀疑它是
-
我总是这样使用:
$('#DEF').on('click', function(event){ event = event || window.event; event.preventDefault(); });
标签: jquery-mobile jquery-selectors