Question

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

enter image description here

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

<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

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

Answer 2

将酒店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(){，您应该使用其中一个页面事件，例如pagecreate。在页面创建时，使用 event delegation 为所有LI创建一个单击处理程序，以便包含动态创建的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 3

把

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

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

3 个答案: