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

问题

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>

回答1:

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>';
}); 

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

Here is a working DEMO

回答2:

Try this

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

}); //click 

EDIT:

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

回答3:

put

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

use this function to get id in detail page

    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
    }

来源：https://stackoverflow.com/questions/27833594/how-to-add-click-event-to-dynamic-list-view-in-phonegap