Javascript 在jqueryMobile中将元素添加到Listview

我有一个列表视图。我需要从列表中添加和删除。添加到列表时，jquery移动样式不会添加到新内容中

<ul data-role="listview" id="contributionList">
   <li id="l1"><a>5.00</a><a data-icon="delete" data-role="button" id="1"></a></li>
   <li><a>10.00</a><a data-icon="delete" data-role="button"></a></li>
   <li><a>15.00</a><a data-icon="delete" data-role="button"></a></li>
   <li><a>20.00</a><a data-icon="delete" data-role="button"></a></li>
   <li><a>25.00</a><a data-icon="delete" data-role="button"></a></li>
   <li><a>50.00</a><a data-icon="delete" data-role="button"></a></li>
   <li><a>100.00</a><a data-icon="delete" data-role="button"></a></li> 
</ul>

5.00
10点
15:00
20.00
25.00
50.00
100.00

我有一个字段集可以将金额添加到列表中

<fieldset class="ui-grid-a">
   <div class="ui-block-a">
      <input type="text" placeholder="Add new Amount" id="contributionAmount" />
   </div>
   <div class="ui-block-b">
     <input type="button" value="Add" id="addContribution"/>
   </div>
</fieldset>

我正在使用append函数结束添加到列表中的其他金额。添加金额，但样式（即jquery mobile）类不会应用于新添加的金额。

---

有人能告诉我如何克服这个问题吗。

您必须刷新jQuery Mobile的

列表视图

，才能将正确的类添加到

列表视图中的正确元素中：

$('#addContribution').on('click', function () {
    var amount_val = $('#contributionAmount').val();
    if (amount_val != '') {
        $('#the-listview').append('<li>' + amount_val + '</li>').listview('refresh');
    }
});

$（'addContribution'）。在（'click'，函数（）{
var金额=美元（“#分摊金额”）.val（）；
如果（金额！=''）{
$（“#列表视图”）。追加（“
”+金额“
”）。列表视图（“刷新”）；
}
});

下面是一个演示：

jQuery Mobile
listview的文档：

编辑

Phill Pafford提出了一个很好的观点，
.on（）
在jQuery 1.7中是新的，jQuery移动团队建议将jQuery 1.6.4与jQuery移动1.0结合使用。在这种情况下，
.on（）
与使用
.bind（）
相同，因此它们可以互换而不会出现问题。
工作正常：




JS

$（'.deleteMe'）.live（'click'，function（））{
$（this.parent（）.remove（）；
$（'贡献列表'）.listview（'刷新'）；
});
$（“#添加贡献”）。单击（函数（）{
var newAmount=$（“#contributionAmount”）.val（）；
如果（新金额！=''）{
$（“#贡献列表”）.append（“
”+newAmount+“
”）.listview（'refresh'）；
$（“#供款金额”）.val（“”）；
}否则{
警报（“无需添加”）；
}
});

HTML



5.00
10点
15:00
20.00
25.00
50.00
100.00



@Jasper FYI.on（）在jQuery 1.6.4中不可用，而jQuery 1.6.4是受支持的jQm 1.0版本+1@PhillPafford是的，我用了1.6.4一段时间，但后来对如果我改为1.7会出现什么问题感兴趣，我唯一注意到的是事件处理速度稍快（我还没有看到任何问题）。@Jasper:为什么$（document）.ready函数被调用两次。当添加金额时，它们被添加两次。@Hozefa我不理解你的问题。
document.ready
触发两次与
click
事件代码无关。@Jasper我正在使用.click（）事件。因此，一次单击就可以添加两次金额。因此，我的意思是，为什么事件会被触发两次。谢谢。这解决了我在近3小时内一直试图解决的问题。为什么$（document）。ready函数会被调用两次。添加金额时，它们会被添加两次。@Hozefa您不应该使用$（document）.准备好jQM，搜索相关问题
$('.deleteMe').live('click', function(){
    $(this).parent().remove();
    $('#contributionList').listview('refresh');
});

$('#addContribution').click(function() {
    var newAmount = $('#contributionAmount').val();

    if(newAmount != '') {
        $('#contributionList').append('<li><a>' + newAmount + '</a><a class="deleteMe"></a></li>').listview('refresh');
        $('#contributionAmount').val('');
    } else {
        alert('Nothing to add');   
    }
});

<div data-role="page" id="home">
    <div data-role="content">
        <ul data-role="listview" id="contributionList" data-split-icon="delete" data-split-theme="d">
           <li id="l1"><a>5.00</a><a id="1" class="deleteMe"></a></li>
           <li><a>10.00</a><a class="deleteMe"></a></li>
           <li><a>15.00</a><a class="deleteMe"></a></li>
           <li><a>20.00</a><a class="deleteMe"></a></li>
           <li><a>25.00</a><a class="deleteMe"></a></li>
           <li><a>50.00</a><a class="deleteMe"></a></li>
           <li><a>100.00</a><a class="deleteMe"></a></li> 
        </ul>
        <br />
        <fieldset class="ui-grid-a">
           <div class="ui-block-a">
              <input type="text" placeholder="Add new Amount" id="contributionAmount" />
           </div>
           <div class="ui-block-b">
             <input type="button" value="Add" id="addContribution"/>
           </div>
        </fieldset>

    </div>
</div>