【问题标题】:Not able to change the dynamically generated button text in jquery mobile无法更改 jquery mobile 中动态生成的按钮文本
【发布时间】:2014-05-19 08:52:30
【问题描述】:

我在 phonegap 应用程序中使用 jquery mobile 动态创建了按钮。

var table = document.getElementById("skiTable");
var row = document.getElementById("skiparticulars");
var clone = table.rows[1].cloneNode(true);

var skiFile = clone.cells[0].getElementsByTagName('input')[0];
var skiformTitle = clone.cells[0].getElementsByTagName('input')[1];

skiFile.id = "skifile" + skiRowCount;
skiFile.value = "";
skiformTitle.id = "formTitle" + skiRowCount;

skiformTitle.value = "";
row.appendChild(clone);
skiRowCount++;

html代码是这样的

<table>
 <tr>
   <td>
      <input type="hidden" id="skifile1" />
      <input type="button" id="formTitle1"/>
   </td>
 <tr>
</table>

这里是更改按钮值的代码:

$("#skifile" + k).val(results.rows.item(j).ski_file);

        $('#formTitle'+ k).val(results.rows.item(j).formTitle);
        $("#formTitle"+k).button("refresh");
tried this also 
//$("#formTitle" + k).prop('value',results.rows.item(j).formTitle).button("refresh");

但它永远不会改变值。

我推荐了这个jquerymobile dynamically changing text for button issue

还有这个How to change the text of a button in jQuery?

【问题讨论】:

  • $("#formTitle"+k).text("refresh");
  • @MohammedImranN nope 和之前一样,测试不显示在按钮中。

标签: javascript jquery jquery-mobile cordova


【解决方案1】:

jQuery Mobile 1.4 示例:

工作示例:http://jsfiddle.net/Gajotres/8x8HE/

JavaScript

$('#formTitle1').parent().html($('#formTitle1').parent().html() + 'Button text');

不带文本的按钮 HTML:

<div class="ui-btn ui-input-btn ui-corner-all ui-shadow">
    <input type="button" id="formTitle1">
</div>

带有文本的按钮 HTML

<div class="ui-btn ui-input-btn ui-corner-all ui-shadow">
    <input type="button" id="formTitle1">Button text
</div>

如果您想了解如何自定义 jQuery Mobile 元素,请阅读 this 文章。

jQuery Mobile 1.3 及以下示例:

工作示例:http://jsfiddle.net/Gajotres/wLzA7/

JavaScript

$('#formTitle1').parent().find('span span').html('Button text');

不带文本的按钮 HTML:

<div data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" data-disabled="false" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c" aria-disabled="false">
    <span class="ui-btn-inner">
        <span class="ui-btn-text"></span>
    </span>
    <input type="button" id="formTitle1" class="ui-btn-hidden" data-disabled="false"/>
</div>

带有文本的按钮 HTML

<div data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" data-disabled="false" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c" aria-disabled="false">
    <span class="ui-btn-inner">
        <span class="ui-btn-text">Button text</span>
    </span>
    <input type="button" id="formTitle1" class="ui-btn-hidden" data-disabled="false"/>
</div>

【讨论】:

猜你喜欢
  • 2011-04-29
  • 1970-01-01
  • 1970-01-01
  • 2011-06-29
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多