在jQuery手機中動態生成彈出窗口的問題

我正在嘗試在我正在處理的移動應用程序中動態生成一個彈出窗口，但我遇到了一個我可以弄明白的問題。我添加了一個控制組和幾個按鈕，但按鈕被添加了兩次（參見下圖）。我相信這很簡單，但我看不到它。我在這裏錯過了什麼。 Thansk！在jQuery手機中動態生成彈出窗口的問題

這是jQuery代碼：

var $popUp = $("<div><div/>").popup({ 
dismissible: false, 
theme: "a", 
overlyaTheme: "a", 
transition: "pop", 
positionTo: "window" 
}).on("popupafterclose", function() { 
//remove the popup when closing 
$(this).remove(); 
}).css({ 
'width': '270px', 
    'height': '200px', 
    'padding': '5px' 
}); 

$("<h2/>", { 
text: "Location Details" 
}).appendTo($popUp); 

$("<label/>", { 
text: "Location: " + locationName 
}).appendTo($popUp); 

$("<label/>", { 
text: "Note:" 
}).appendTo($popUp); 
$("<p/>", { 
text: locationNote 
}).appendTo($popUp); 
$("<div data-role='controlgroup' data-type='horizontal' class='myGroup'/>").trigger("create").appendTo($popUp); 

$("<a>", { 
text: "Submit" 
}).buttonMarkup({ 
inline: false, 
mini: true, 
icon: "check", 
}).on("click", function() { 
$popUp.popup("close"); 
}).appendTo('.myGroup'); 

$("<a>", { 
text: "Back", 
    "data-rel": "back" 
}).buttonMarkup({ 
inline: false, 
mini: true, 
theme: "e", 
icon: "back", 
}).appendTo('.myGroup'); 
$popUp.popup('open').trigger("create");

enter image description here

來源

2015-03-02 cubanGuy

你的代碼似乎工作：http://jsfiddle.net/ezanker/qeps2xyk/我刪除了控制組上的觸發器（'創建'），因爲如果初始化該部件，則需要將按鈕添加到ui-controlgro up-controls div jQM創建的控制組div的子級。 – ezanker 2015-03-02 16:55:34

感謝您的關注！我實際上是在絕望中添加了'trigger'（'create'）'，並且在我發佈這個問題之前忘記刪除它，但是它不起作用。 – cubanGuy 2015-03-02 17:12:49

您能從我的第一條評論中重現小提琴中的問題嗎？ – ezanker 2015-03-02 17:21:17

我結束了使用網格，而不是controlgroup這樣做，因爲我的目的，它只是正常工作：

var $popUp = $("<div><div/>").popup({dismissible: false, theme: "a", overlyaTheme: "a", transition: "pop",positionTo: "window" 
}).on("popupafterclose", function() { 

$(this).remove(); 
}).css({ 
    'width': '270px', 
    'height': '200px', 
    'padding': '5px' 
}); 

$('<div class="ui-grid-a"><div class="ui-grid-solo"><div class="ui-block-a"> <h2>' + locationName + '</h2><label>Note: </label><textarea disabled="disabled">' + itemClickedNote + '</textarea></div></div>').appendTo($popUp); 

$('<div class="ui-block-a" style="width:48%"><a data-icon="back" data-rel="back" data-role="button" class="ui-mini">Cancel</a>').on("click", function() { 
$popUp.popup("close"); 

}).appendTo($popUp); 

$('</div>').appendTo($popUp); 

$('<div class="ui-block-b" style="width:48%; float:right"><a data- icon="plus" id="addLocationsBtn" data-role="button" class="ui- mini">Submit</a>').appendTo($popUp); 

$('</div> </div>').appendTo($popUp); 

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

來源

2015-03-02 21:31:52 cubanGuy

在jQuery手機中動態生成彈出窗口的問題

回答

相關問題