2

我遇到了一些初学者问题......案例：一个按钮将一个 li 元素与 id="123" 附加到 ul 列表视图。点击这个新的 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>
4

2 回答 2

0

新创建的 DOM 没有收到事件，所以你需要做的是：

$('li').live('click',function(){
  alert($(this).attr('id')));
});
于 2013-07-03T08:44:12.903 回答
0

当您添加点击事件时，您会将其直接添加到元素中。如果您稍后添加一个元素，除非您明确这样做，否则它不会附加事件处理程序，除非您使用事件委托。使用 $.on() 将事件处理程序附加到父对象。然后所有要添加到该父级的后代将自动附加事件处理程序。

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

           $("#acclist").on("click","li", function(e){
                e.preventDefault();
                passDataObject.selectedId = this.id;
                $.mobile.changePage('#accountdetail');
            });
于 2013-07-03T08:45:08.987 回答