jquery如何将音频附加到listview

我正试图将<audio>附加到我的列表中，如下所示：

<ul data-role="listview" data-style="bubble">
        <li class="ui-li-bubble-receive">short receive<span class="ui-li-bubble-time">9:20 PM</span></li>
        <li class="ui-li-bubble-sent">But I have no choice. I have a big exam tomorrow. (bubble sent)<span class="ui-li-bubble-time">9:26 PM</span></li>
</ul>

带有原始jquery mobile（在Tizen操作系统上）风格：

.ui-listview .ui-li-bubble-receive,
.ui-listview .ui-li-bubble-left,
.ui-listview .ui-li-bubble-sent,
.ui-listview .ui-li-bubble-right,
.ui-listview .ui-li-bubble-sos {
  display: inline-block;
  background-clip: padding-box;
  max-width: 100%;
  word-wrap: break-word;
  font-size: 0.8636363636363636rem;
}
.ui-listview .ui-li-bubble-receive p,
.ui-listview .ui-li-bubble-left p,
.ui-listview .ui-li-bubble-sent p,
.ui-listview .ui-li-bubble-right p,
.ui-listview .ui-li-bubble-sos p,
.ui-listview .ui-li-bubble-receive span,
.ui-listview .ui-li-bubble-left span,
.ui-listview .ui-li-bubble-sent span,
.ui-listview .ui-li-bubble-right span,
.ui-listview .ui-li-bubble-sos span {
  font-size: 0.8636363636363636rem;
}
.ui-listview .ui-li-bubble-receive img,
.ui-listview .ui-li-bubble-left img,
.ui-listview .ui-li-bubble-sent img,
.ui-listview .ui-li-bubble-right img,
.ui-listview .ui-li-bubble-sos img {
  position: relative;
  min-width: 7.272727272727273rem;
  min-height: 7.272727272727273rem;
}
.ui-listview .ui-li-bubble-receive:first-child,
.ui-listview .ui-li-bubble-left:first-child,
.ui-listview .ui-li-bubble-sent:first-child,
.ui-listview .ui-li-bubble-right:first-child,
.ui-listview .ui-li-bubble-sos:first-child {
  margin-top: 0.6818181818181819rem;
}
.ui-listview .ui-li-static.ui-li-bubble-receive,
.ui-listview .ui-li-static.ui-li-bubble-left {
  margin-left: 0px;
  margin-right: 4.545454545454546rem;
  border-image-source: url(images/00_messagebubble_bg_receive.9.png);
  border-image-slice: 60 22 19 57 fill;
  border-image-width: auto;
  padding: 9px 14px 21px 48px;
  color: #000000;
}
.ui-listview .ui-li-static.ui-li-bubble-receive > .ui-li-bubble-time,
.ui-listview .ui-li-static.ui-li-bubble-left > .ui-li-bubble-time {
  margin-left: 0.3181818181818182rem;
  position: absolute;
  display: inline-block;
  bottom: 0.5454545454545454rem;
  left: 100%;
  font-size: 0.5rem;
  text-align: left;
  color: #8b8b8b;
}
.ui-listview .ui-li-static.ui-li-bubble-sent,
.ui-listview .ui-li-static.ui-li-bubble-right {
  margin-left: 4.545454545454546rem;
  margin-right: 0px;
  border-image-source: url(images/00_messagebubble_bg_sent.9.png);
  border-image-slice: 55 47 20 13 fill;
  border-image-width: auto;
  padding: 9px 47px 20px 13px;
  color: #000000;
}
.ui-listview .ui-li-static.ui-li-bubble-sent > .ui-li-bubble-time,
.ui-listview .ui-li-static.ui-li-bubble-right > .ui-li-bubble-time {
  margin-right: 0.3181818181818182rem;
  text-align: right;
  color: #8b8b8b;
  position: absolute;
  display: inline-block;
  bottom: 0.5454545454545454rem;
  right: 100%;
  font-size: 0.5rem;
}
.ui-listview .ui-li-static.ui-li-bubble-sos {
  color: #e94949;
}
.ui-listview .ui-li-static.ui-li-bubble-sos > .ui-li-bubble-time {
  color: #e94949;
}
.ui-listview .ui-li-static.ui-li-bubble-date {
  color: #686868;
  font-style: italic;
  width: auto;
  height: 1.0909090909090908rem;
  background-image: url(images/00_messagebubble_date_bg.png);
  background-repeat: repeat-x;
  background-position: center center;
  font-size: 0.7272727272727273rem;
  margin: 0.9090909090909092rem 0.2727272727272727rem;
  border: 0px none red;
  padding: 0 0;
  padding-top: 0.5em;
  margin-left: 23px;
  margin-right: 23px;
  text-align: center;
}
.ui-listview .ui-li-static.ui-li-bubble-date * {
  display: inline-block;
  background-color: #f8f6ef;
  padding-left: 0.5em;
  padding-right: 0.5em;
}
.ui-listview span.ui-li-bubble-time {
  font-weight: bold;
  width: 3.181818181818182rem;
}

但当我做时

code += '<table border=1 style="table-layout:fixed; min-height:100px; width:100%;max-width:180px;"><tr><td style="max-width:120px;">';          
code += '<audio data-controls="true" style="width:150px;">';
code += '<source src="file.mp3" type="audio/mp3" />';
code += 'Your browser does not support the audio tag.';
code += '</audio>';
code += '</td></tr></table>';
temp = '<li class="ui-li-bubble-sent"><span>'+code+'</span><span class="ui-li-bubble-time">'+'10:20'+'</span></li>';
$("#myList li:last").after(temp);

它只显示了一张空桌子。我做错了什么？：(我为此浪费了很多时间，尝试了许多变体（有/没有div、table等），但都没有成功。在列表之外，我的音频成功工作，但我需要把它放在这个列表中。

您有许多代码错误：

您忘记将id="myList"添加到listview ul标记中。
在向code变量添加数据之前，您应该定义它
```
var code = '';
```
使用$("#myList").append(temp)而不是$("#myList li:last").after(temp)，因为.append()将在ul的最后一个子级之后添加元素。
```
 $("#myList").append(temp);
```
将项动态附加到列表视图后，需要通过调用.listview("refresh")来重新增强ul（应用样式）。
```
 $("#myList").append(temp).listview("refresh");
```

演示

相关内容

最新更新

热门标签：