0

我是 jQuery 移动和 HTML5 的新手。我创建了一个对 WebSQL SQLite 存储进行简单 CRUD 操作的页面。它运作良好。

在页面上，我有插入和显示信息的按钮（使用 jQuery 移动）..在这个按钮上它正确显示 jQuery 移动主题按钮和文本框。但是在成功回调 Javascript 中，当我渲染文本框和按钮时，它会像普通的 HTML 文本框和按钮一样显示。

以下是我的代码片段。

HTML：

<div id='riderResults'></div>
<a href="javascript:void(0);" data-role="button" data-inline="true" data-mini="true" data-theme="b" onClick="displayRider()" name="display" id="display">Add Report</a>

Javascript：

function displayRider(){
  db.transaction(function(tx) {
    tx.executeSql("select * from riders", [], function(tx, result) {
      riderdataset = result.rows;
      for (var i = 0, item = null; i < riderdataset.length; i++) {
        item = riderdataset.item(i);
        var output='';
        output+='<div>'
             +'<input type="text" value="'+item['riderName']+'" name="name'+i+' id="name'+i+'"/>&nbsp;'
             +'<a href="javascript:void(0);" data-role="button" data-inline="true" data-mini="true" data-theme="b" onClick="updateRider('+i+')" name="update_rider" id="update_rider">Update Rider</a>'
             +'</div>';
      }
      document.getElementById('riderResults').innerHTML=output;
    });
  });
}

请任何人都可以在我错的地方给我正确的方向..谢谢。

4

1 回答 1

0

我的建议是你去你的浏览器并检查一个由 jquery-mobile 创建的按钮的元素，然后你复制那个元素的标签并将它放在你的 var 输出中。因为 jquery-mobile 会根据您告诉它的数据角色自动向您的元素添加类。

标签应如下所示：

<a data-role="button" data-transition="none" data-theme="a" href="#id" data-corners="true" data-shadow="true" data-iconshadow="true" data-iconsize="18" data-wrapperels="span" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-icon-left ui-btn-up-a">
  <span class="ui-btn-inner ui-btn-corner-all">
    <span class="ui-btn-text">
      Button
    </span>
    <span class="ui-icon ui-icon-tab ui-icon-shadow ui-iconsize-18">
      &nbsp;
    </span>
  </span>
</a>
于 2012-10-05T07:16:05.227 回答