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

Solution 1:

Instead of 2 LI elements, save the hotel id as a data-attribute of the visible LI:

$.each(response, function(index,value){                                                                 
    output+='<lidata-hotelid="'+value.Hotel.Id+'"><ahref="#"style="text-decoration:none;"><imgalt="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 idvar id = $(this).jqmData("hotelid");
        ... rest of click handler
    });

    $("#btnReg").on("click", function(){
       //your code to dynamically create list
    });  
});

Here is a working DEMO

Solution 2:

Try this

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

}); //click 

EDIT:

$.each(response, function(index,value){                                                                 
  hiddenId+='<litype="hidden">'+value.Hotel.Id+'</li>';
  output+='<liclass="hotel"  ><ahref="#"style="text-decoration:none;"><imgalt="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 

Solution 3:

put

<ahref="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];
        }
        returnvars; // this is your id value
    }