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

Question

我必须将点击事件添加到动态列表视图中。当我单击此列表时，它会重定向到更多详细信息页面。我正在获取特定区域可用的酒店列表并插入 list-view。现在，当我单击任何特定列表酒店时，都会重定向到更多详细信息页面。
检查以下可用酒店列表的图像列表视图。每家酒店都有唯一的 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

试试这个

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

编辑2

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

}); //click 

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

}); //click

编辑3

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

Answer 2

放

 <a href="detail.html?id=' + value.Hotel.Id + '"> before your <li>

使用此函数获取详情页id

    function getUrlVars() {
        var vars = [], hash;
        var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
        for(var i = 0; i < hashes.length; i++)
        {
            hash = hashes[i].split('=');
            vars.push(hash[0]);
            vars[hash[0]] = hash[1];
        }
        return vars; // this is your id value
    }

Answer 3

代替 2 个 LI 元素，将酒店 ID 保存为可见 LI 的 data-attribute:

$.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 移动设备中，您应该使用页面事件之一，而不是 $(document).ready(function(){，例如页面创建。在创建页面时，使用 event delegation so that dynamically created ones are included. Use the jQM method jqmData() 为所有 LI 创建点击处理程序，以从 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

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

How to add click event to dynamic list view in PhoneGap?

javascript

jquery

list

cordova

jquery-mobile