编辑/更新: 好的,所以我现在有点不好意思。经过近两天的盘旋这个问题,我找到了一个非常接近发布的解决方案。
简而言之,$('#someListView li').click(function() {
需要将点击检测移出pageinit
事件并在生成列表项后放入pagebeforeshow
事件中。这似乎解决了这个问题,虽然我必须承认我不太清楚为什么....
.trigger("create")
也不需要。我希望它可以帮助某人。
==================================================== ===
原始查询:
我有一个小问题,我设法归结为以下问题。基本上我想要一个attr
来自动态生成的listview
列表项的数据值。听起来很简单。对数据进行硬编码工作正常,我可以访问该data-id
属性,但是一旦我动态生成它,无论刷新或重新创建父级,点击事件似乎都不起作用。html 已更改,因为我在检查元素时可以看到值。造型似乎没问题。
我在这里看到了许多重新创建对象和刷新列表的示例,但似乎没有一个有效。如果我注释掉javascript
用于生成列表项的,硬编码的项目可以正常工作。我想我错过了一些非常简单的东西,但我无法理解它可能是什么。
html:
<div data-role="page" id="testpage" data-theme="c">
<div data-role="content" id="testpage_content" data-theme="c">
<div id="listview_container">
<ul data-role="listview" id="someListView">
<li data-id="4444">
<a href="#"><p>hard-coded data-id=4444</p></a>
</li>
<li data-id="5555">
<a href="#"><p>hard-coded data-id=5555</p></a>
</li>
</ul>
</div>
</div>
</div>
jQuery:
$(document).on('pageinit','#testpage',function(){
$('#someListView li').click(function() {
alert($(this).attr('data-id'));
});
});
$(document).on('pagebeforeshow','#testpage',function(){
var arrayData = new Array("4444","5555"); //usually generate this data from ajax call
$("#someListView").empty(); //empty hard-coded list items
$.each(arrayData, function(key, value){
$("#someListView").append(
'<li data-id="'+ value +'">'+'
<a href="#"><p>clicking this should alert: '+ value +'</p></a>'+
'</li>'
);
$('#someListView').listview('refresh');
});
$('#listview_container').trigger('create');
});