在jQuery mobile中动态生成弹出窗口的问题

时间:2015-03-02 16:22:27

标签: javascript jquery jquery-mobile

我正在尝试动态生成我正在处理的移动应用中的弹出窗口,但我遇到了一个我能弄明白的问题。我添加了一个带有几个按钮的控制组,但按钮添加了两次(见下图)。我确信这很简单,但我看不到它。我在这里想念的是什么Thansk!

这是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

1 个答案:

答案 0 :(得分:0)

我最后使用网格而不是控制组进行操作,为了我的目的,它工作得很好:

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");