如何添加点击事件到PhoneGap的动态列表视图？ [英] How to add click event to dynamic list view in PhoneGap?

问题描述

我必须将点击事件添加到动态列表视图。当我单击此列表，它重定向到更多详细信息页面。我正在获取在特定区域可用的酒店列表，并插入列表视图。现在，当我点击任何特定的列表酒店将重定向到更多详细信息页面。

查看以下图片列表视图的酒店列表。每个酒店都有独特的id所以当我点击任何列表，它将使用独特的酒店ID，并从服务器获取该酒店的更多详细信息，并显示在该特定酒店的一个专用页面。 我的问题是我如何添加点击甚至在动态列表视图，并传递该唯一的酒店Id，以便以后我可以使用该酒店Id从服务器获取更多的信息。

I have to add click event to the dynamic list view. When I click this list it redirect to more detail page. I am fetching the list of Hotels available in particular area and insert into list-view. Now when I click any particular list Hotels redirect to more detail page.
check the following image list view of list of hotels available. Every hotel have unique id So when I click any list it will use that unique hotel id and fetch more details information of that hotel from server and show on one dedicated page for that particular Hotel. My Question is How I add click even on dynamic list view and pass that unique Hotel Id so that later I am able to fetch more information from server using that Hotel Id.

>

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

My script code, How to add click even in dynamic list

<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>

推荐答案

可见LI的 数据属性 ：

Instead of 2 LI elements, save the hotel id as a data-attribute of the visible 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>';
}); 

而不是 $（document）.ready（function（）{在jQuery Mobile中，您应该使用一个页面事件，例如pagecreate。在页面创建时使用 event delegation ，以便包含动态创建的。使用jQM方法 jqmData（） 从LI中检索id数据属性：

Instead of $(document).ready(function(){ in jQuery Mobile you should use one of the page events e.g. pagecreate. On page creation create a click handler for all LIs using event delegation so that dynamically created ones are included. Use the jQM method jqmData() to retrieve the id data-attribute from the LI:

$(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

Here is a working DEMO

这篇关于如何添加点击事件到PhoneGap的动态列表视图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！