动态创建一个jQuery内jQuery Mobile的列表视图中移动弹出

这已经让我疯狂所以希望有人能帮助我:-D动态创建一个jQuery内jQuery Mobile的列表视图中移动弹出

我想创建一个jQuery Mobile的弹出窗口，然后在弹出的内我想动态创建一个jQuery手机列表视图。但是我不断收到以下错误消息。

未捕获TypeError：无法读取未定义的属性'jQuery19104145257784985006'。

这里是我的代码

$('#create').on('click', function() { 
    //create a div for the popup 
    var $popUp = $("<div/>").popup({ 
     dismissible: false, 
     theme: "a", 
     overlyaTheme: "a", 
     transition: "pop" 
    }).on("popupafterclose", function() { 
     //remove the popup when closing 
     $(this).remove(); 
    }); 

    //create a title for the popup 
    $("<ul data-role='listview'/>").trigger("create").appendTo($popUp); 

    $popUp.popup('open').trigger("create"); 
});

我已经创建了一个基本的jsfiddle这里http://jsfiddle.net/QA7Dm/

任何帮助表示衷心感谢。

来源

2013-05-07 user1812741

删除'触发器（ '创建'）'附加列表视图后，它的下面添加'$（ '[数据角色=列表视图]'）的触发器（ '刷新'）;。 ' – Omar 2013-05-07 20:42:55

工作例如：http://jsfiddle.net/Gajotres/Ar8N3/

HTML：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>jQM Complex Demo</title> 
     <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/> 
     <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/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>  
    </head> 
    <body> 
     <div data-role="page" id="index"> 
      <div data-theme="a" data-role="header"> 
       <h3> 
        First Page 
       </h3> 
       <a href="#second" class="ui-btn-right">Next</a> 
      </div> 

      <div data-role="content"> 
       <a href="#" data-role="button" id="create">Create a popup</a> 
      </div> 

      <div data-theme="a" data-role="footer" data-position="fixed"> 

      </div> 
     </div>  
    </body> 
</html>

JS：

$(document).on('pageshow', '#index', function(){ 
    $(document).on('click', '#create', function(){  
     $('<div>').attr({'data-role':'popup','id':'popupBasic','data-dismissible':'false','data-theme':'a','data-transition':'pop'}).appendTo('[data-role="content"]'); 
     $('<div>').attr({'data-role':'header','data-theme':'b','id':'popup-header'}).append('<h1>Header</h1>').appendTo('#popupBasic'); 
     $('<ul>').attr({'data-role':'listview','id':'list-test','data-theme':'a'}).appendTo('#popupBasic'); 
     $('<li>').append('List test').appendTo('#list-test'); 
     $('#index').trigger('pagecreate'); 
     var popup = setInterval(function(){ 
      $("#popupBasic").popup("open",{ 
       overlyaTheme: "a" 
      }).on("popupafterclose", function() { 
       //remove the popup when closing 
       $(this).remove(); 
      }); 
      clearInterval(popup); 
     },1);  
    });  
});

来源

2013-05-07 21:02:20 Gajotres

感谢您的深入解答。我简化了一下，但你的回答给了我一个很好的理解。谢谢 – user1812741 2013-05-07 21:34:00

这里是修复。

$('#create').on('click', function() { 
var $popUp = $("<div/>").popup({ 
    dismissible: false, 
    theme: "a", 
    overlyaTheme: "a", 
    transition: "pop" 
}).on("popupafterclose", function() { 
    $(this).remove(); 
}); 
$("<ul id='test' data-role='listview'/>").trigger("refresh").appendTo($popUp); 
$popUp.popup('open'); 
});

演示：http://jsfiddle.net/Palestinian/QA7Dm/2/

来源

2013-05-07 21:05:21 Omar

谢谢你的回答！我已经检查了上面的答案是正确的，因为它是更深入一点。非常感谢。 – user1812741 2013-05-07 21:34:53

@ user1812741我会这样做，我的修复速度很快，因为我使用的是iPhone;） – Omar 2013-05-07 21:36:45

动态创建一个jQuery内jQuery Mobile的列表视图中移动弹出

回答

相关问题