0

我在 jquery mobile 中有一个简单的（这里是新手）任务。更改应用了自定义样式的按钮的文本。我可以在“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');
});

谢谢

4

1 回答 1

0

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

适用的 api（在这种情况下增强样式）是 .addClass(")。在我的例子中，我定义了如下样式：

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

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

$('#goal').addClass('goal-style');  // Note: do not use '.goal-style'
于 2013-07-22T15:00:15.157 回答