jqm弹出窗口未打开 [英] jqm popup is not opening

问题描述

我在div容器中添加了一个弹出窗口.无法打开弹出窗口.

I added a popup to a div-container. Opening the popup doesn't work.

这是我的容器结构:

 <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打开弹出窗口:

I'd like to open the popup by 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>

推荐答案

page div应该是 popup div的直接父级.如果将它放在其他任何div内，它将不会打开或出现故障.

page div should be direct parent of popup div. If you place it inside any other div, it won't open, or malfunction.

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

---

You need to delegate click event to dynamically added elements.

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

演示

Demo

这篇关于jqm弹出窗口未打开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！