在jqueryMobile中向Listview添加元素
Adding elements to Listview in 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>
我有一个字段集添加金额到列表。
<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)类不会应用到新添加的数量。谁能告诉我怎样克服这个问题?
成功了:
- http://jsfiddle.net/NXrRp/10/
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>
你必须刷新listview
的jQuery移动添加正确的类到正确的元素在你的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/
Docs for jQuery Mobile listview
: http://jquerymobile.com/demos/1.0/docs/lists/docs-lists.html
编辑
Phill Pafford提出了一个很好的观点,.on()
在jQuery 1.7中是新的,jQuery Mobile团队建议在jQuery Mobile 1.0中使用jQuery 1.6.4。在这种情况下,.on()
与使用.bind()
相同,因此它们可以毫无问题地交换。
相关文章:
- JQuery添加元素需要在我的js之前再次添加JQuery脚本
- 如何使用jquery遍历具有动态添加元素的数组
- jQuery appendTo 替换元素而不是添加元素,如果正在添加的元素预先存在于列表中
- 如何使用jquery添加元素
- 动态添加元素上的 HammerJS
- CSS没有'使用javascript向页面动态添加元素时无法工作
- 使用Javascript在DOM元素中添加元素
- 在添加元素时激发JS事件
- 什么's是在IE8+中添加元素的最有效方法
- d3.js在添加元素时协调
- 使用路由器链接动态添加元素
- 动态添加元素
- 在页面内容完全加载后,使用jQuery在DOM中添加元素
- j查询绑定单击不添加元素
- 在循环 jQuery 上添加元素
- 从一个页面调用 javascript 函数以在第二个页面上添加元素
- 页面加载后向<正文>添加元素时出现问题
- 动态添加元素时刷新 HTML
- 动态添加元素时不触发 JQuery 事件
- 如何使用 JavaScript 获取动态添加元素的宽度