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

Question

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.min,
              "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.

Answer 1

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.