有没有一种方法可以强制代码在按钮的样式在点击后更新后运行？

Question

我目前在一个项目中使用jQuery Mobile，并且遇到了一个有趣的小怪癖。

我们有一个屏幕，其中使用多个按钮来切换显示的信息（基本上，按钮被用作单选按钮）。我们为按钮添加了click 处理程序，如下所示：

// This is all grossly oversimplified, of course.
function callService() {
  service.sendRequest()
    .success(function(response) {
      displayResponse(response);
      $('#button-id').addClass('highlighted')
    })
    .error(function(response) {
      displayErrors(response.errors);
    });
}

$('#button-id').click(function() {
  callService();
});

正如您可能看到或至少猜到的那样，上面的代码会在单击按钮时进行异步服务调用。当服务返回响应时，屏幕会更新并且按钮应该被突出显示。

发生的情况是这样的：当我们将模拟服务器（为本地测试设置，只返回虚拟数据的服务器）设置为延迟 0 毫秒时，按钮不会突出显示。似乎应用了突出显示，但随后 jQuery 立即将其删除，因为它使用自己的一些样式来处理单击（即，在悬停、单击和释放时更新样式）。

当我们将延迟设置为更实际的值，甚至低至 250 毫秒（鉴于此应用使用的实际后端服务不会发生），问题就消失了。我最好的猜测是 jQuery 在该时间窗口内完成了所有样式更新，因此当服务最终返回响应时，按钮的更新不再被覆盖。

实际上，这不是什么大问题，因为生产中使用的服务会有接近 1-2 秒的延迟时间。我只是好奇是否有任何方法可以“正确”地处理这个问题；例如，是否可以编写代码在 保证 jQuery 完成对一个元素的多个样式更新之后运行？

Answer 1

只需使用您自己的类并覆盖 jQuery 应用的任何样式。类似http://jsfiddle.net/morrison/cj8ra/。

Answer 2

也许你可以试试这个：

$('div').live('pageshow',function(event, ui){
  alert('This page was just hidden: '+ ui.prevPage);
});

文档：http://jquerymobile.com/demos/1.0a4.1/#docs/api/events.html

$('#page_id').live('pageshow',function(event, ui){
    $('#button-id').click(function() {
        callService();
    });
});