2

クラス「upperUlProductSearch」をクリックするとアラートを設定しましたが、ajax作成リスト内のliをクリックしても応答がありません。また、タグと、クリックするとアラートが表示されるのと同じクラスの別の静的ulliがあります。誰かが私がajaxliまたは適切な方法をターゲットにできない理由を理解するのを手伝ってくれることを望んでいました。よろしくお願いします!!!

jquery：

$( document ).on( "pageinit", "#template", function() {
$( "#upperApplianceSearch" ).on( "listviewbeforefilter", function ( e, data ) {
    var $ul = $( this ),
        $input = $( data.input ),
        value = $input.val(),
        html = "";
    $ul.html( "" );
    if ( value && value.length > 1 ) {
        $ul.html( "<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>" );
        $ul.listview( "refresh" );
        $.ajax({
            url: "productautocomplete.php",
            type: "POST",
            dataType: "json",
            data: {
                q: $input.val()
            }
        })
        .then( function (data) {
            $.each( data, function ( i, val ) {
                /*html += "<li><a href='#' data-role='none' value=" + val.productId + ">" + val.productName + "</a></li>";*/
                html += '<li class="upperUlProductSearch" id=' + val.productId + '>' + val.productName + '</li>';
            });
            $ul.html( html );
            $ul.listview( "refresh" );
            $ul.trigger( "updatelayout");
        });
    }
});
})

$(".upperUlProductSearch").click(function() {
alert ("helleo");
});

html：

<ul id="upperApplianceSearch" class="ui-listview ui-listview-inset ui-
corner-all ui-shadow" data-filter-theme="d" data-filter-placeholder="Find an  
appliance..." data-filter="true" data-icon="false" data-inset="true" data- 
role="listview">

<li id="41" class="upperUlProductSearch ui-li ui-li-static ui-btn-up-f ui- 
first-child ui-last-child">Hawley</li>
</ul>

<a class="upperUlProductSearch ui-link">Hello</a>

<ul class="ui-listview" data-role="listview">
  <li class="upperUlProductSearch ui-li ui-li-static ui-btn-up-f ui-first- child ui-last-child">Li Test</li>
</ul>
4

2 に答える 2

2

交換：

$(".upperUlProductSearch").click(function() {
    alert("helleo");
});

と：

$('#upperApplianceSearch').on('click', 'li', function () {
    alert("helleo");
});
于 2013-03-13T01:46:10.220 に答える
0

これは機能するはずです：

  1. リストコンテナを作成し<div id="product-list-container">...</div>ます。

  2. 次のようにリストを再作成します。

    $('#product-list-container')
    .empty()
    .html('<ul id="product-list" data-role="listview"...>'+listItems+'</ul>')
;

$('#product-list').listview();

ページ全体に対しても再レンダリングをトリガーする必要がある場合があるため、最後の行は次のようになります。

    $('#page-containing-list').page();
    $('#product-list').listview();

私は自分のプロジェクトの1つでこれを行いましたが、うまくいきました。

また、OperaDragonflyやFirebugなどのデバッガーでリストがどうなるかを確認してください。JQMは、追加の属性だけでなく追加の要素も追加し、元の要素（クリックをリッスンする場所）を非表示にしたり、アクセス可能にしたりする場合もあります。

于 2013-03-01T01:29:31.187 に答える