javascript - jqm 弹出窗口未打开

Question

我向 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>

Answer 1

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 事件委托(delegate)给动态添加的元素。

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

Demo