Question

我在jquery mobile中有一个简单的（newbie here）任务。更改已应用自定义样式的按钮的文本。我可以在'pageinit'事件中无问题地更改文本但是我在此过程中丢失了自定义样式。已经阅读了stackoverflow中的大量文章，但仍缺乏可行的解决方案。

下面由ajax

加载的html页面的摘录

CSS

#goal .ui-btn-inner   {
    text-align: center;
    background: chartreuse;
    ui-disabled: true;
}

要设置样式的按钮

<div data-corners="false" data-role="controlgroup" >
  <a href="#" data-role="button" id="goal" >
   text to be changed
  </a>
</div>
...

以下是更改按钮文本的jquery移动代码。

$(document).delegate('#problem_screen', 'pageinit', function() {
  $('#goal').on('click', function() {
    console.log('goal clicked');
  });
  $('#goal .ui-btn-text').text('New button text');
});

由于

Answer 1

终于有了这个工作。我的第一个JQM错误是在多页面应用程序的每个页面上定义自定义样式。这是错误的 - 您必须在一个位置定义所有自定义样式，通常是每个页面都包含的样式表文件。另一个错误是在不同的页面上具有相同的id值。错误 - id值在整个应用程序中必须是唯一的。

适用的api（在这种情况下增强了样式）是.addClass（＆＃34;）。在我的例子中，我定义了一个样式如下：

.goal-style {
 text-align: center;
 background: charteuse;
 ui-disabled: true;
}

现在，在我更新按钮的文字后，我说：

$('#goal').addClass('goal-style');  // Note: do not use '.goal-style'

按钮文本更改后，Jquery移动设备丢失自定义样式

1 个答案: