Is it possible to create element on the fly with jQuery Mobile?

I have an app built using jQuery (and using various jQuery-UI tools).

For some reason, i have to port it to smartphones/tablet computer, and decided to use jQuery Mobile for that (in order to minimize the number of changes).

In my vanilla app, I created some elements of the page on the fly, depending of user interactions.

For example a slider could be created like that (p is an object with a bunch of params):

function createSlider(p){
     return $("<div/>",{
              "id":p.id,
              "class":p.divClass,
           }).slider({
              "orientation": p.align,
              "min":p.constraint.mi开发者_高级运维n,
              "max":p.constraint.max,
              "step":p.step,
              "value":p.curVal,
              "animate":"normal"
              /*and some event handling here, but it doesn't matter*/
           });

}

And it will produce a nice looking slider. Now it looks like:

function createSlider(p){
    return $("<range/>",{
           "id":p.id,
           "class":p.divClass,
           "min":p.constraint.min,
           "max":p.constraint.max,
           "step":p.step,
           "value":p.curVal,
    });   
}

But as it's created on the fly, all the stuff done by jQuery Mobile on the page load isn't done on it.

Is there a way to force that initialization without writing the slider in the html?

Thanks.

EDIT: I found in the doc that it could be achieved using container.trigger("create"); However this does not work yet.

EDIT2: Ok create was the solution.

---

According to the documentation (see edit in the question), using trigger("create") on the containing element works.

And to make that work, you also need to remember that range is an input type and not a tag...

Working solution:

function createSlider(){
    return $("<input/>",{
           "type":"range",
           "id":"sl",
           "min":0,
           "max":15,
           "step":1,
           "value":1,
    });   
}

function appendSlider(){
    $("#yourdiv").append(createSlider()).trigger("create");
}

As a sidenote, the documentation for jQuery mobile lacks a search option.

---

Try calling .page() on the container the content is being added to. Alternatively, adding .page() to the content you're returning may also work.