jqm popup is not opening

问题

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

This is my container-structure:

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

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

But it's not working

This works:

Java-Script:

        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>

回答1:

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>

To open it using HTML

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

To open programatically

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

---

You need to delegate click event to dynamically added elements.

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

Demo

回答2:

Try this out:- 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>

Issue with your approach is that you cannot call methods on popup prior to initialization.

来源：https://stackoverflow.com/questions/22474123/jqm-popup-is-not-opening