javascript - 如何在PhoneGap中添加点击事件到动态 ListView ？

Question

我必须将点击事件添加到动态 ListView 。当我单击此列表时，它会重定向到更多详细信息页面。我正在获取特定区域可用的酒店列表并将其插入 ListView 中。现在，当我单击任何特定列表酒店时，都会重定向到更多详细信息页面。
检查以下可用酒店列表的图像 ListView 。每家酒店都有唯一的 ID，因此当我单击任何列表时，它将使用该唯一的酒店 ID，并从服务器获取该酒店的更多详细信息，并显示在该特定酒店的专用页面上。 我的问题是如何在动态 ListView 上添加点击并传递唯一的酒店 ID，以便稍后我能够使用该酒店 ID 从服务器获取更多信息。

我的脚本代码，如何在动态列表中添加点击

<script> 
            $(document).ready(function(){ 
                $("#btnReg").click(function(){ 
                    $("#listHotelsOptions").empty();
                    var distance = document.getElementById('distance_id').value; 
                    var output=""; 
                    var hiddenId="";
                    $.ajax({ 
                            url:"http://192.168.1.4/Experiements/webservices/getHotels.php", 
                            type:"GET", 
                            dataType:"json", 
                            data:{type:"login", Distance:distance}, 
                            ContentType:"application/json", 
                            success: function(response){ 
                            console.log(response) 
                                $.each(response, function(index,value){                                                                 
                                          hiddenId+='<li  type="hidden">'+value.Hotel.Id+'</li>';
                                          output+='<li ><a href="#" style="text-decoration:none;"> <img alt="chef" src="./images/chef.min.png" width="20px" height="20px" >'+value.Hotel.Name+' has'+value.Hotel.Romms+'</a></li>';
                                }); 
        $("#listHotelsOption").append(output).listview().listview('refresh'); 
                        }, 
                            error: function(err){ 
                            alert(JSON.stringify(err)); 
                        } 
                    }) //ajax 
                }); //click 
            }); //ready 
</script>

Answer 1

将酒店 ID 保存为 data-attribute，而不是 2 个 LI 元素。可见 LI 的 :

$.each(response, function(index,value){                                                                 
    output+='<li data-hotelid="'+value.Hotel.Id+'"><a href="#" style="text-decoration:none;"> <img alt="chef" src="./images/chef.min.png" width="20px" height="20px" >'+value.Hotel.Name+' has'+value.Hotel.Romms+'</a></li>';
}); 

您应该使用页面事件之一，例如 pagecreate，而不是 jQuery Mobile 中的 $(document).ready(function(){。在页面创建时，使用 为所有 LI 创建一个点击处理程序> event delegation ，以便包含动态创建的。使用 jQM 方法 jqmData() 从 LI 检索 id 数据属性:

$(document).on("pagecreate", "#yourpageid", function(){
    $("#listHotelsOption").on("click", "li", function(){
        //get hotel id
        var id = $(this).jqmData("hotelid");
        ... rest of click handler
    });

    $("#btnReg").on("click", function(){
       //your code to dynamically create list
    });  
});

Here is a working DEMO