6

jquery モバイルのリストビューに問題があります。JSON を使用してサーバーからデータをロードし、リストビューに項目を入力したいと考えています。それはうまくいきます。しかし、新しくロードされたアイテムのクリックに反応しようとすると、イベントを取得します! どういうわけかビューを更新する必要があると思いますが、その方法が少しわかりません。

http://jsfiddle.net/VqULm/227/で小さなスケッチを作成しました

クリックしてボタンを押すと、アイテムのクリック イベントが追跡されなくなります。新しいアイテムに関する "Wokrs" アラートを受け取るにはどうすればよいですか?

読んでくれてありがとう！

4

3 に答える 3

21

試す

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

とjQuery > 1.7

デモ

また

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

jQuery バージョン 1.6.4 で。

デモ

なぜこれが必要なのか

なぜなら。ページのリロード後に追加するliためlistview、これらliの s のイベントはlive(使用した jQuery バージョンの場合) またはdelegate(jQuery > 1.7) にする必要があります。

于 2012-06-04T16:07:43.783 に答える
2

リモート データ ソースとリスビューへ

ul 要素を 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 

 });

希望は誰かに役立ちます

于 2014-09-21T18:51:30.490 に答える