jQuery动态listview传递数据

Question

即时通讯遇到一些初学者问题...情况：一个按钮，该按钮将一个id为123的li元素附加到ul listview。 单击此新li元素后，应显示一个新页面，显示已单击“ id 123”。

只要li元素经过硬编码且未附加到此按钮，这种方法就可以工作...这是我的错吗？

<script>
            var passDataObject = { selectedId: null }

            $(document).ready(function(){
                $("#acclist li").on("click", function(e){
                    e.preventDefault();
                    passDataObject.selectedId = this.id;
                    $.mobile.changePage('#accountdetail');
                });                 

                $("#btn").click(function(){
                    var output = '<li id="123"><a href="#">Test Account</a></li>';
                    $("#acclist").append(output).listview('refresh');
                });                 
            });

            $(document).on( "pagebeforeshow", "#accountdetail", function( e ) {
                $("#details").html(["Selected id is: '", passDataObject.selectedId, "'"].join(""));
            });
        </script>
    </head>
    <body>
        <div data-role="page" id="accountpage">
            <div data-role="content">
                <button id="btn">Add</button>
                <br/>
                <ul id="acclist" data-role="listview"></ul>
            </div>
        </div>

        <div data-role="page" id="accountdetail">
            <div data-role="content">
                <div id="details"></div>
            </div>
        </div>
    </body>

Answer 1

新创建的DOM没有收到事件，因此您需要执行以下操作：

$('li').live('click',function(){
  alert($(this).attr('id')));
});

Answer 2

添加点击事件时，会将其直接添加到元素中。 如果以后添加一个元素，则除非您显式地添加它，否则将不附加事件处理程序，除非您使用事件委托。 使用$ .on（）将事件处理程序附加到父对象。 然后，所有要添加到该父级的后代将自动附加事件处理程序。

将事件处理程序添加到<ul>元素

           $("#acclist").on("click","li", function(e){
                e.preventDefault();
                passDataObject.selectedId = this.id;
                $.mobile.changePage('#accountdetail');
            });