2

当我单击“upperUlProductSearch”类时设置了一个警报，但是当我单击 ajax 创建列表中的 li 时，我没有得到响应。我还有一个 a 标签和另一个静态 ul li，它们具有相同的类，单击时确实会给我警报。我希望有人能帮我弄清楚为什么我不能定位 ajax li 或正确的方法。提前致谢！！！

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();

我在我的一个项目中做到了这一点，并且效果很好。

还可以查看 Opera Dragonfly 或 Firebug 等调试器中的列表会发生什么。JQM 不仅添加了额外的属性，还添加了额外的元素，甚至可能使原始元素（您监听点击的地方）隐藏或可访问。

于 2013-03-01T01:29:31.187 回答