2

编辑/更新: 好的,所以我现在有点不好意思。经过近两天的盘旋这个问题,我找到了一个非常接近发布的解决方案。

简而言之,$('#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');
});
4

0 回答 0