jquery mobile click() on listview

Question

I have a problem with the listview in jquery mobile. I want to load some data from a server using JSON and fill thy listview with the items. That works fine. But when I am trying to react on a click on a new loaded item I do net get the event! I think I have to refresh the view somehow, bit do not know how.

I made a little sketch on http://jsfiddle.net/VqULm/227/

when u hit the click me button the click event on a item isn't tracked anymore. How do i get the "Wokrs" alert on the new items?

Thank u very much for reading!

Answer 1

Try

    $('#listview').on('click', 'li', function() {
        alert("Works"); // id of clicked li by directly accessing DOMElement property
    });

with jQuery > 1.7

DEMO

OR

$('#listview li').live('click', function() {
    alert("Works"); // id of clicked li by directly accessing DOMElement property
});

with your jQuery version 1.6.4.

DEMO

why you need this

Because. you're adding li within listview after page reload, so any event for those lis should live (for jQuery version you used) or delegate (jQuery > 1.7).

Answer 2

If your JQM version is old (like mine- jqm 1.2.0), and both mentioned methods are not working for you

Try this:

     <ul data-role="listview" id="myList">
       <li id="1" >text</li>
     </ul>

     //on the js code use delegate
     $('#myList').delegate('li', 'click', function () {
         alert($(this).attr('id'));
     });

Answer 3

To remote data source and liswiew

wrap the ul element with a div

<div data-role="page" id="myPage">
  <form id="myform" class="ui-filterable">
    <input id="what" data-type="search" placeholder="i.e.Carpentry...">
    <div id="w_what">
      <ul id="ul_what" data-role="listview" data-inset="true" data-filter="true" data input="#what">
      </ul>
     </div>
   </form>
 </div>

$( "#ul_what" ).on( "filterablebeforefilter", function ( e, data ) {
    var $ul = $( this ),
    $input = $( data.input ),
    value = $input.val(),
    html = "";
    $ul.html( "" );       // initially null 
    $('#w_what').show();  // For next search
    if ( value && value.length > 0 ) {
        $ul.html( "<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>" );
        $ul.listview( "refresh" );
        $.ajax({
            url: "/php/getWhat.php", // Ajax url
            dataType: "json",        // json 
            data: {
                q: $input.val()      // which value to be searched
            }
        })
        .then( function ( response ) {
            $.each( response, function ( id, val ) {
                html += "<li>" + val.text + "</li>";  // json response has text element
            });
            $ul.html( html );
            $ul.listview( "refresh" );
            $ul.trigger( "updatelayout");
        });
    }
});

$('#ul_what').delegate('li', 'click', function () {
    var ul = $(this);          // when clicked
    $('#what').val(ul.text()); // set the value for input       
    $('#w_what').hide();       // hide the div 

 });

Hope helps to somenone