jQuery移动端按钮保持按下状态。

Question

我有一个与ajax POST相关联的jQuery mobile按钮。如果POST失败，jQuery mobile按钮会保持按下状态而不是“弹出”。有任何想法吗？

- jaynp

---

你可能有一个未被移除的“pressed”CSS类？ - Deborah

你能展示一些代码吗？在按钮按下时调用的函数可能会很有帮助。 - Dean Elbaz

可能是如何使用jQuery Mobile删除按钮的活动状态？的重复问题。 - Jonathan Hall

Answer 1

这可以很容易地完成。

这里是我之前回答一个问题时制作的jsFiddle示例：http://jsfiddle.net/3PhKZ/7/

如果你看一下，有这样一行代码：

$.mobile.activePage.find('.ui-btn-active').removeClass('ui-btn-active ui-focus');

它会尝试在当前活动页面上查找按下的按钮，如果成功，则将删除两个类，这些类负责按钮按下状态。不幸的是，在这里纯CSS解决方案是不可能的。您可以测试此示例，只需注释顶部行，并查看会发生什么。

最后一件事，选择器$.mobile.activePage只能在pagebeforeshow、pageshow、pagebeforechange、pagechange、pagebeforehide和pagehide页面事件期间使用，因此要考虑到这一点。

如果无法使用此选择器，请将其替换为页面ID，如下所示：

$('#pageID').find('.ui-btn-active').removeClass('ui-btn-active ui-focus');

因此，您的最终代码将如下所示：

$.ajax( "example.php" )
.success(function() { doStuff(); })
.error(function() { 
    $('#pageID').find('.ui-btn-active').removeClass('ui-btn-active ui-focus');
 })

- Gajotres

---

谢谢！类似这样的代码更简单，而且似乎可以工作： <a data-role="button"href="#second" id="foobar">下一页</a> $('#foobar').removeClass('ui-btn-active ui-focus'); 这不够好吗？ - jaynp

嗯，但是它无法与以下内容一起正常工作： <input type='submit' data-theme="a" id="login-button" value="Login"> - jaynp

不要使用 <button type="submit" data-theme="a" id="login-button">登录</button>。 - jaynp

Answer 2

在你的AJAX处理中添加一个错误条款，以弹回按钮。

$.ajax( "example.php" )
.success(function() { doStuff(); })
.error(function() { /*code to unpress button here*/ })

- Michael Johansen

---

我有这样一个条款。我对取消按钮的代码感兴趣。 - jaynp

你应该在问题中发布你的代码，这样我们才能看到你如何实现你的按钮。 - Michael Johansen

Answer 3

对于那些使用"input"而不是"anchors"作为按钮的人来说，当使用例如"submit"和"reset"按钮并按下它们时，它们仍然保持活动状态，这有时是不希望的，具体取决于单击按钮时执行的操作。

我不确定这是否是预期行为，我已经阅读过jQuery mobile的错误，但该行为至少在jQM 1.3.2中仍然存在。

是的，技巧是要删除active class，但是这些会变得棘手，因为class未添加到输入标记，而是添加到由所有丑陋的东西创建的父DIV中，以样式化按钮，这就是为什么在选择输入时删除活动类不起作用。

通过分析jquery mobile生成的HTML，解决方法是：

删除输入父级上的活动类，而不是实际的输入元素。

$('.mybutton_class_or_ID').parent().removeClass('ui-btn-active');

我更喜欢这种方法，而不是在您希望更具选择性地删除类时清除整个页面上的所有活动类。

- VicM