Home/ Questions/Q 8973259
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T18:24:22+00:00

When I create a popup dynamically, with a listview on it, I got extra

  • 0

When I create a popup dynamically, with a listview on it, I got extra (static) items in the listview. Here is the code on jsBin which shows the problem.

why is that two extra li in the list?

just to have the code here too:

$_coursemenu = function( params ) {
  if ( window === this )
    return new $_coursemenu( params );
  var self = this;
  this.params = params;
  this.init();
};

$_coursemenu.prototype = {
  init: function() {
    this.page = $('<div id="' + this.params.id + '" data-theme="a" data-role="popup" data-history="false"  data-position-to="window"></div>').appendTo( this.params.parent );
    this.ul = $('<ul data-role="listview" data-inset="true" data-theme="b" data-autodividers="false"></ul>').appendTo( this.page );
    this.lid = $('<li data-role="divider" data-theme="a">Popup API</li>').appendTo( this.ul );
    this.li1 = $('<li><a>delete</a><li>').appendTo( this.ul );
    this.li2 = $('<li><a>aha</a><li>').appendTo( this.ul );

    this.page.popup();
    this.params.parent.page('destroy').page();

  },
  relocate: function(parent) {
    parent.append( $('#' + this.params.id + '-popup') );
    parent.append( $('#' + this.params.id + '-screen') );
  }

};

html:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>  </head>
  <body>
    <div id='page' data-role='page'>
      <div data-role='content'>
        <a href='#mypopup' data-role='button' data-rel='popup'>popup</a>
      </div>
    </div>
    <script>
      $(document).ready( function(){
        var cm = $_coursemenu({parent:$('#page'),id:'mypopup'})
            console.log('done.');
      });
    </script>
  </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your problem is that you aren’t closing your li tags,

    $_coursemenu.prototype = {
  init: function() {
    this.page = $('<div id="' + this.params.id + '" data-theme="a" data-role="popup" data-history="false"  data-position-to="window"></div>').appendTo( this.params.parent );
    this.ul = $('<ul data-role="listview" data-inset="true" data-theme="b" data-autodividers="false"></ul>').appendTo( this.page );
    this.lid = $('<li data-role="divider" data-theme="a">Popup API</li>').appendTo( this.ul );
    this.li1 = $('<li><a>delete</a></li>').appendTo( this.ul );
    this.li2 = $('<li><a>aha</a></li>').appendTo( this.ul );
    this.page.popup();
    this.params.parent.page('destroy').page();

},

    And here’s an update to your jsbin

    • 0