Question

我有一些初学者的问题...... case：一个按钮，它将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

当您添加click事件时，您将其直接添加到元素中。如果稍后添加元素，除非您使用事件委派，否则不会附加事件处理程序，除非您明确这样做。使用$ .on（）将事件处理程序附加到父对象。然后添加到该父级的所有后代将自动附加事件hanler。

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

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

jquery动态列表视图传递数据

2 个答案: