Passing data from dynamic listview

Passing data from dynamic listview

Hi there,

I'm having trouble with some beginner case:

There is a button which appends a li element with id ="123" to an ul element (listview) ... then i wanna click on that new element and a new page should appear saying "element id = 123".
It kind of works as long as the li elements were not appended dynamicly but hard coded in the html part.
Whats my fault here?

  1. <script>
  2.             var passDataObject = { selectedId: null }
  4. $(document).ready(function(){
  5. $("#acclist a").on("click", function(e){
  6. e.preventDefault();
  7. passDataObject.selectedId = $(this).closest("li").attr("id");
  8. $.mobile.changePage('#accountdetail');
  9. });
  11. $("#btn").click(function(){
  12. var output = '<li id="123"><a href="#">Test Account</a></li>';
  13.                     $("#acclist").append(output).listview('refresh');
  14. });
  15. });

  17.             $(document).on( "pagebeforeshow", "#accountdetail", function( e ) {
  18.                 $("#details").html(["Selected id is: '", passDataObject.selectedId, "'"].join(""));
  19.             });
  20.         </script>
  21.     </head>
  22.     <body>
  23.         <div data-role="page" id="accountpage">
  24. <div data-role="content">
  25. <button id="btn">Add</button>
  26. <br/>
  27. <ul id="acclist" data-role="listview">
  28.                                     <!--<li id="123"><a href="#">test</a></li>-->
  29.                                 </ul>                       
  30. </div>
  31. </div>
  32.     
  33. <div data-role="page" id="accountdetail">
  34. <div data-role="content">
  35. <div id="details"></div>
  36. </div>
  37. </div>
  38.     </body>