Question

请帮帮我，我可以在第二页上获得动态列表，一切都好。但是当我点击任何“li”以获得“id”的警报（对于硬编码列表工作正常）我不会得到任何东西。我也尝试过listview（'refresh'）和（触发器）但没有效果。大多数其他问题都是在listview（“刷新”）的帮助下解决的，但在我的情况下却没有。请看看你是否能指出我正确的方向。

$(document).on('pagebeforeshow','#page1',function(){
        $("#bar .type").click(function(){
            localStorage['ppl']=$(this).attr('id');
            $.mobile.changePage("#second",{
                transition: "slide",
                reverse: true
            });
        });
    });
    $(document).on('pagebeforeshow','#second',function(){
        var ty =  localStorage['ppl'];
        getOther(ty);// THIS POPULATE THE LIST
        /*THESE ONES DONT WORK FOR ME */
        //$(document).trigger('create');
        //$('[data-role="listview"]').listview("refresh");
        //$('#foo).listview('refresh');
        $("#foo li").click(function(){
            alert($(this).attr('id'));// NO ALERT FROM THIS NEW LIST
            $.mobile.changePage('#third',{
                transition: "slide",
                reverse:true
            });
        });
    });

这是HTML代码。

<div data-role="page" id="page1">
    <div  data-role="header"><h3>First Page</h3></div>
    <div data-role="content">
    <ul id="bar">
        <li class="type" id="A" value="A">A</li>
        <li class="type" id="B" value="B">B</li>
    </ul>
</div><div data-role="footer" data-position="fixed">    </div>
</div>
<div data-role="page" id="second">
<div data-role="header">    <h3>Second Page</h3>
    <a href="#page1" class="ui-btn-left">Back</a></div>
<div data-role="content">
    <div id="status">
<!--THIS LIST IS CREATED AFTER CLICKING EITHER "A" OR "B"--->
     <ul id="foo" data-role="listview">
       <li id="AB">AB</li>
       <li id="AC">AC</li>
     </ul>
    </div>
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
<div data-role="page" id="third"><div data-role="header"><h3>Third Page</h3><a href="#second" class="ui-btn-left">Back</a></div>
<div data-role="content">
    <div id="status2">

    </div>
</div>
<div data-role="footer" data-position="fixed"></div></div>

Answer 1

经过大量研究和头部划痕后，我对代码进行了一些更改并得到了结果。谢谢你的帮助。首先是我的功能“getOther（ty）;”我把它添加到体内，

    $(document).on('pagebeforeshow','#page1',function(){
 AND IN IT I PUT THIS LINE
$("#foo").append($("<li></li>")).listview("refresh");

它完成了将动态列表添加到DOM中的技巧。用于将点击功能附加到“li”我正在使用

$("#foo li").click(function(){

alert($(this).attr('id'));// NO ALERT FROM THIS NEW LIST

我把它改成了

$("#foo").on('click','li',function(){

并且它有效。谢谢您的帮助。非常欣赏它。

Answer 2

使用jquery＆＃34; on＆＃34;方法而不是点击＆＃39;。

$("#foo").find('li').on(function(){
     localStorage['ppl']=$(this).attr('id');
     $.mobile.changePage("#second",{
        transition: "slide",
        reverse: true
     });
});

Answer 3

尝试重构代码，以便在pagecreate上创建单击处理程序。因此，在创建page1时，添加用于单击#bar.type项的事件处理程序。然后，当创建第二页时，使用事件委托在foo中向LI添加处理程序。因为这些LI是动态的并且在添加处理程序时不可用，所以实际上需要将处理程序添加到UL并将其委托给它的LI。

$(document).on('pagecreate','#page1',function(){
    $("#bar .type").click(function(){
        localStorage['ppl']=$(this).attr('id');
        $.mobile.changePage("#second",{
            transition: "slide",
            reverse: true
        });
    });
});
$(document).on('pagecreate','#second',function(){
    $("#foo").on("click", "li", function(){
        alert($(this).attr('id'));// NO ALERT FROM THIS NEW LIST
        $.mobile.changePage('#third',{
            transition: "slide",
            reverse:true
        });
    });    
});

$(document).on('pagebeforeshow','#second',function(){
    var ty =  localStorage['ppl'];
    getOther(ty);// THIS POPULATE THE LIST
});

这是 DEMO

动态创建的List上的Jquery函数不起作用

3 个答案: