jQuery Mobile动态创建弹出窗口和内容的最佳方式

Question

我有以下代码使用jQuery mobile创建弹出窗口.创建弹出窗口并创建表单并将其附加到弹出窗口以及两个按钮.这段代码确实有效,但我想知道是否有更好的方法来实现我的预期目标.

    //create a div for the popup
    var $popUp = $("<div/>").popup({
        dismissible : false,
        theme : "a",
        overlyaTheme : "a",
        transition : "pop"
    }).bind("popupafterclose", function() {
                    //remove the popup when closing
        $(this).remove();
    });
    //create a title for the popup
    $("<h2/>", {
        text : PURCHASE_TITLE
    }).appendTo($popUp);

            //create a message for the popup
    $("<p/>", {
        text : PURCHASE_TEXT
    }).appendTo($popUp);

    //create a form for the pop up
    $("<form>").append($("<input/>", {
        type : "password",
        name : "password",
        placeholder : PASSWORD_INPUT_PLACEHOLDER
    })).appendTo($popUp);

   //Create a submit button(fake)
    $("<a>", {
        text : SUBMIT_BTN_TXT
    }).buttonMarkup({
        inline : true,
        icon : "check"
    }).bind("click", function() {
        $popUp.popup("close");
        that.subscribeToAsset(callback);
    }).appendTo($popUp);

    //create a back button
    $("<a>", {
        text : BACK_BTN_TXT,
        "data-jqm-rel" : "back"
    }).buttonMarkup({
        inline : true,
        icon : "back"
    }).appendTo($popUp);

    $popUp.popup("open").trigger("create");

Answer 1

您的示例很棒,这是应该如何创建动态jQuery/jQuery Mobile内容的海报示例.

只改变三件事:

• 最后,您应该将弹出窗口附加到所需的jQuery Mobile页面,因为它不能在data-role ="page"div之外工作.
• 将函数绑定更改为函数on.On是更快的事件绑定方法.它就是替换bind和delegate.
• 检查您的代码是否适用于Chrome等网络工具包浏览器.Chrome有一个令人讨厌的错误,它阻止在除pageshow之外的每个页面事件中打开程序化弹出窗口.有关此问题的更多信息:https://stackoverflow.com/a/15830353/1848600