0

リストビューを使用して動的にポップアップを作成すると、リストビューに余分な (静的) アイテムが表示されます。問題を示すjsBinのコードを次に示します。

liリストに2つ余分にあるのはなぜですか？

ここにもコードを入れるだけです：

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

1 に答える 1

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のアップデートです

于 2012-12-10T14:55:02.057 に答える