jQuery Mobile best way to create pop up and content dynamically
html, jquery, jquery-mobile, jquery-mobile-popup
Solution
Your example is great, this is poster example how dynamic jQuery/jQuery Mobile content should be created.
Change only three things:
- At the end you should append popup to the needed jQuery Mobile page because it is not going to work outside a data-role="page" div.
- Change the function bind to the function on. On is much faster method of event binding. And it is here to replace bind and delegate.
- Check if your code is going to work in web kit browsers like Chrome. Chrome has a nasty bug which prevents programmatic popup open in every page event except pageshow. More info about this problem: https://stackoverflow.com/a/15830353/1848600
Problem
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"); ```