我有一个列表视图。我需要在列表中添加和删除。添加到列表后,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>
我有一个字段集可以向列表中添加金额。
<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)类不会应用于新添加的金额。 有人能告诉我如何克服这个问题。
答案 0 :(得分:12)
搞定了:
JS
$('.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');
}
});
HTML
<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>
答案 1 :(得分:4)
您必须刷新jQuery Mobile的listview
,才能将正确的类添加到listview
中的正确元素中:
$('#addContribution').on('click', function () {
var amount_val = $('#contributionAmount').val();
if (amount_val != '') {
$('#the-listview').append('<li>' + amount_val + '</li>').listview('refresh');
}
});
以下是演示:http://jsfiddle.net/PQ39n/1/
jQuery Mobile listview
的文档:http://jquerymobile.com/demos/1.0/docs/lists/docs-lists.html
修改强>
Phill Pafford提出了一个很好的观点,.on()
是jQuery 1.7中的新功能,jQuery Mobile团队建议将jQuery 1.6.4与jQuery Mobile 1.0一起使用。在这种情况下,.on()
与使用.bind()
相同,因此可以毫无问题地互换它们。