在动态创建的列表视图中获取行数据

时间:2013-04-18 10:44:09

标签: javascript jquery-mobile cordova

我正在动态创建列表视图。我想在点击时获取特定行的数据,以继续进一步的步骤。  我的代码如下

function getList(tx, results){

                $('#DeliveryList').empty();
                var len = results.rows.length;
                for(var i=0; i <len; i++)
                {
                    var deliveryItems = results.rows.item(i);
                    var html = '<li data-role="list-divider">'+deliveryItems.DeliveryName+ ' | ' + deliveryItems.PrimaryName+' <span class="ui-li-count">Copay ='+deliveryItems.Total+'</span> </li><li><a><img src="Pending"/><h3>'+deliveryItems.Name1+'</h3><p>'+deliveryItems.Address+'</p><p>'+deliveryItems.City+' <b></b></p><p><strong>'+deliveryItems.ContactNumber+'</strong></p><a href="#PrescriptionPage" class="cls_btn" id="btn_list" onclick = "Prescription()" >Delivary Details</a></a></li>'; 
                    $('#DeliveryList').append(html).trigger('create'); 
                }
                $('ul').listview('refresh');
            }

我的html文件看起来像

    <div data-role="page" id="page3" >
        <div data-role="header">
                        <a href="#page1" data-icon="back">Back</a>
                        <h1>Heading</h1>
                        <a href="#Page2" class="ui-btn-right" type="submit" data-role="button" data-icon="home" data-theme="b" data-mini="true">Home</a>
                    </div><!-- /header -->
                    <ul data-role="listview" id="DeliveryList" data-inset="true" data-theme="d" data-divider-theme="b"> </ul>
</div>

任何人都可以帮助我实现结果。在此先感谢。

2 个答案:

答案 0 :(得分:1)

以下代码

对我有用
$('ul').children('li').on('click', function () {
                                         alert('Selected Name=' + $(this).text());
                                          });

答案 1 :(得分:0)

你已经在使用jQuery了,为什么不用它来创建这些元素呢?我认为getList()绑定了一个事件。

// Create the element
var li = $('<li></li>');
// Add your class
li.addClass('list-divider');
// Change the innerHTML
li.html('Your content');

// Then append it to the list
$('#DeliveryList').append(li);

只需根据需要更改此代码即可。此示例只添加一个<li>元素,其中包含类和一些内容。

祝你好运。