jquery mobile click() on listview

问题

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!

回答1:

Try

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

with jQuery > 1.7

DEMO

$('#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).

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

回答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

来源：https://stackoverflow.com/questions/10884378/jquery-mobile-click-on-listview

标签

jquery

listview

mobile

click