如何将点击事件添加到PhoneGap中的动态列表视图？

Question

我必须将点击事件添加到动态列表视图中。当我单击此列表时，它会重定向到更多详细信息页面。我正在获取特定区域的可用酒店列表并插入到列表视图中。现在，当我单击任何特定列表时，酒店将重定向到更多详细信息页面。
检查以下可用酒店列表的图像列表视图。每家酒店都有唯一的 ID 因此，当我单击任何列表时，它将使用该唯一的酒店 ID 并从服务器获取该酒店的更多详细信息，并显示在该特定酒店的一个专用页面上。 我的问题是如何在动态列表视图中添加点击并传递唯一的酒店 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 保存为可见 LI 的 data-attribute，而不是 2 个 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>';
}); 

您应该使用页面事件之一，而不是 jQuery Mobile 中的 $(document).ready(function(){，例如页面创建。在创建页面时，使用 event delegation 为所有 LI 创建一个单击处理程序，以便包含动态创建的处理程序。使用 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
    });  
});

这是一个有效的DEMO

Answer 2

试试这个

$("#btnReg").on('click',function(){ 

}); //click 

编辑：

$.each(response, function(index,value){                                                                 
  hiddenId+='<li  type="hidden">'+value.Hotel.Id+'</li>';
  output+='<li class="hotel"  ><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>';
}); 

$(".hotel").on('click',function(){ 

}); //click 

EDIT2

$(".hotel").live('click',function(){ 

}); //click 

$(".hotel").delegate('click',function(){ 

}); //click 

EDIT3

'<li class="hotel" id="'+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>';

$(".hotel").live('click',function(){ 
  var id = $(this).attr('id');
  alert(id);
}); //click