是否可以使用jQuery Mobile即时创建元素? [英] Is it possible to create element on the fly with jQuery Mobile?

问题描述

我有一个使用jQuery(以及各种jQuery-UI工具)构建的应用.

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

出于某种原因，我不得不将其移植到智能手机/平板电脑上，并决定为此使用jQuery Mobile(以最大程度地减少更改次数).

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.

例如，可以像这样创建一个滑块(p是带有一堆参数的对象):

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,
    });   
}

但是，由于它是动态创建的，因此jQuery Mobile在页面加载时完成的所有工作都没有完成.

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

有没有一种方法可以在不将滑块写入html的情况下强制进行初始化?

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

谢谢.

编辑:我在 但是，这还行不通.

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

EDIT2 :确定是解决方案.

推荐答案

根据文档(请参见问题中的编辑)，在包含元素的作品上使用trigger("create").

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...

工作解决方案:

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

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

作为旁注，jQuery mobile的文档缺少搜索选项.

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

这篇关于是否可以使用jQuery Mobile即时创建元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！