javascript 在 jqueryMobile 中向 Listview 添加元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8524884/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding elements to Listview in jqueryMobile
提问by Hozefa
I have a listview. I need to add and remove from the list. On adding to the list, the jquery mobile styling does not get added to the new content.
我有一个列表视图。我需要在列表中添加和删除。添加到列表时，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>
I have a fieldset to add amounts to the list.
我有一个字段集可以将金额添加到列表中。
<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>
I am using the append function to end other amounts that are added to the list. The amount gets added, but the styling (i.e. jquery mobile) classes do not get applied to the new added amount. Can someone tell me on how to overcome the problem.
我正在使用 append 函数来结束添加到列表中的其他金额。添加数量，但样式（即 jquery mobile）类不会应用于新添加的数量。有人可以告诉我如何克服这个问题。
回答by Phill Pafford
Got it working:
让它工作：
JS
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
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>
回答by Jasper
You have to refresh the listviewfor jQuery Mobile to add the correct classes to the correct elements in your listview:
您必须刷新listviewjQuery Mobile 以将正确的类添加到您的listview:
$('#addContribution').on('click', function () {
var amount_val = $('#contributionAmount').val();
if (amount_val != '') {
$('#the-listview').append('<li>' + amount_val + '</li>').listview('refresh');
}
});
Here is a demo: http://jsfiddle.net/PQ39n/1/
这是一个演示：http: //jsfiddle.net/PQ39n/1/
Docs for jQuery Mobile listviews: http://jquerymobile.com/demos/1.0/docs/lists/docs-lists.html
jQuery Mobile 文档listview：http: //jquerymobile.com/demos/1.0/docs/lists/docs-lists.html
EDIT
编辑
Phill Pafford brings-up a good point that .on()is new in jQuery 1.7 and the jQuery Mobile team suggest using jQuery 1.6.4 with jQuery Mobile 1.0. In this case .on()is the same as using .bind()so they can be interchanged without issue.
Phill Pafford 提出了一个很好的观点，它.on()是 jQuery 1.7 中的新内容，jQuery Mobile 团队建议在 jQuery Mobile 1.0 中使用 jQuery 1.6.4。在这种情况下.on()与 using 相同，.bind()因此它们可以毫无问题地互换。
