jqm popup没有打开

时间:2014-03-18 08:41:09

标签: javascript jquery jquery-mobile

我在div容器中添加了一个弹出窗口。打开弹出窗口不起作用。

这是我的容器结构:

 <div data-role="page" id="mainPage">
    <div id="myContent">  <!--div id="myContent" data-role="content/main"> dosn't work either -->
        <div id="template" style="display:none;">
            <a class="select-Button">
               ...
            </a>
        </div>
        <ul data-role="list-view"></ul>
        <div data-role="popup" id="myPopup">
            <p>My Popup</p>
        </div>
    </div>
</div>

我想通过javascript打开弹出窗口:

...clone the template and add clones to the list-view before.
$('#mainPage').find('.select-Button').on('click', function(){
    $('#myPopup').popup("open");
});

但它不起作用

这有效:

Java的脚本:

        var $popUp = $('#myPopup').popup({
            dismissible: false,
            theme: "c",
            overlyaTheme: "d",
            transition: "pop"
        });
        $popUp.popup('open').trigger("create");

HTML:

<div id="myPopup">   <!-- removed data-role="popup" here-->
            <p>My Popup</p>
</div>

2 个答案:

答案 0 :(得分:3)

page div应该是 popup div的直接父级。如果将它放在任何其他div中,它将无法打开或发生故障。

<div data-role="page">
  <div data-role="popup" id="myPopup">
     <p>My Popup</p>
  </div>
<div id="myContent">
  <div id="template" style="display:none;">
 </div>
 <ul data-role="list-view"></ul>
</div>

使用HTML

打开它
<a href="#popupID" data-rel="popup">Popup</a>

以编程方式打开

$("#popupID").popup("open");

您需要将click事件委托给动态添加的元素。

$(document).on("click", ".select-button", function () {
  $('#myPopup').popup("open");
});
  

<强> Demo

答案 1 :(得分:0)

试试这个: - http://jsfiddle.net/adiioo7/rF873/

<强> JS: -

$('#myPopup').popup();    
$('#myPopup').popup("open");

<强> HTML: -

<div data-role="page">
    <div id="myContent">  <!--div id="myContent" data-role="content/main"> dosn't work either -->
        <div id="template" style="display:none;">
        </div>
        <ul data-role="list-view"></ul>
        <div dara-role="popup" id="myPopup">
            <p>My Popup</p>
        </div>
    </div>
</div>

您的方法问题是您无法在初始化之前调用弹出窗口上的方法。