Question

In my Phonegap android application dynamically adding list items to jqm listview where on click on a item ,am taking the item index and passing it to another page to display relative info based on clicked item.It was working fine with jqm v1.0a3 but now i updated to jqm v1.1.0 and now onclick event is not working.Any help?

for(var i=0;i<result.length;i++)
{
 var li=document.createElement("li");
  li.innerHTML="<a onclick='getIndexOfClickedListItem("+i+");'></a><p><b>CustName</b>"+result[i].fields.NAME+</p>";
 ul.appendChild(li);
}

Answer 1

Hiya Please take a look in here (Since I cannot see your full code) working demo using JQM list view http://jsfiddle.net/3RyXz/

This will add new li as well you can navigate between pages.

This should help, please let me know if I missing anything.

Updated Demo

here with index alert http://jsfiddle.net/RTpqd/14/ (I have added the similar function as you need – getIndexOfClickedListItem 🙂

Behavior: 1st – click on Add Item link and then click on the foo1 li you will see the correct index value popping up.

code

$('.add').click( function(){
    $('#1, #2').append('<li><a onclick="getIndexOfClickedListItem('+count+');"> foo' + count + '</a></li>');

    $(this).closest('.ui-content').find('.ui-listview').listview('refresh');

    count++;
});

getIndexOfClickedListItem function here rest demo will make more clear

//adding click on new list item for index
function getIndexOfClickedListItem(str){

     alert("The clicked list index is ==>" + str);
}

part of code which does add li

$('.add').click( function(){
    $('#1, #2').append('<li>' + count + '</li>');

    $(this).closest('.ui-content').find('.ui-listview').listview('refresh');

    count++;
});