get clicked value from listview

Question

I have created a dynamical listview with jQuery Mobile and I want to get the value of the clicked list item. The reason I want to achieve this is because I need this value to link to another page and show more details about the clicked item.

I already have searched around the internet and I found a solution which doesn't work for me.

My (jQuery Mobile) page looks like this:

<div data-role="page" id="personList">
    <div data-role="header" data-position="fixed">
        <h1>header</h1>
    </div>

    <div data-role="content">
    </div>

    <div data-role="footer" data-position="fixed">
        footer
    </div>
</div>

My function to dynamically add items to the listview looks like this:

(I used HTML5 SQL web storage to store data local on a device)

function showPersons() 
{
  db.transaction (function (transaction)
  {
//get data from table
var sql = "SELECT * FROM person";
transaction.executeSql (sql, undefined, 

//loop through sql result and add results to html variable
function (transaction, result)
{
  var html = "<ul id=" + "personListview" + "data-role=" + "listview" +" data-filter=" + "true" + ">";


  if (result.rows.length) //if there is something found
  {
    for (var i = 0; i < result.rows.length; i++) 
    {
      var row = result.rows.item (i);
      var voorNaam = row.voorNaam;
      var achterNaam = row.achterNaam;
      var email = row.email;

        html += "<li data-theme='e'" + "data-name='test value'>" + "<a href='#'>" +  "<h3>" + voorNaam + " " + achterNaam + "</h3><p>" + email + "</p></a></li>";

    }
  }
  else //if there is nothing found
  {
    html += "<li> No persons found </li>";
  }

  html += "</ul>";

  //Change page
  $("#personList").unbind ().bind ("pagebeforeshow", function ()
  {
    var $content = $("#personList div:jqmData(role=content)");
    $content.html (html);
    var $ul = $content.find ("ul");
    $ul.listview ();
  });

  $.mobile.changePage ($("#personList"));

}, error);});}

As you can see, I added "data-name='test value'" to the "li" tags so I should get this value with the following function:

$('#personListview').children('li').click(function() {
alert($(this).attr('data-name')); });

However, this last function doesn't work. Nothing happens when I click at an "li" item. I would expect I get an alert with the value of "data-name").

PS. even when I have declared this, I doesn't get an alert:

$('#personListview').children('li').click(function() {
    alert('test');

Could someone help me? I am a beginner with Javascript and jQuery(mobile).

Thanks in advance!

Answer 1

Your code:

"<ul id=" + "personListview" + "data-role...

outputs to:

<ul id=personListviewdata-role...

Your javascript needs to read:

'<ul id="personListview" data-role=....'

Notice that I'm using single quotes at the beginning so I can use double quotes throughout.

Also, I would recommend giving each <ul> its own ID, or using a CSS class on it and then binding the event with $('.myclass').click(function() { ... });