Question

当我动态创建一个弹出窗口，并在其上有一个列表视图时，我在列表视图中有额外的（静态）项目。以下是jsBin上显示问题的代码。

为什么列表中还有两个li？

这里也有代码：

$_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>

Answer 1

您的问题是您没有关闭li代码，

$_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();

},

以下是jsbin

的更新

我的listview中的额外li项目在弹出窗口中动态创建

1 个答案: