htmljquery-mobilejqueryjquery-mobile-popup

jQuery Mobile best way to create pop up and content dynamically

I have the following code creating a pop up using jQuery mobile. The pop up is created and a form is created and appended to the popup along with two buttons. This code does work but I am wondering if there is a better way to achieve my intended goal. 

    //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");
Solution

  • Your example is great, this is poster example how dynamic jQuery/jQuery Mobile content should be created.

    Change only three things: