Jquery Mobile 动态组件创建答案

【问题标题】：Jquery Mobile Dynamic Component CreationJquery Mobile 动态组件创建
【发布时间】：2014-04-28 15:07:40
【问题描述】：

我想即时创建 JQM 小部件/组件。所以我创建了一个自定义函数来创建它。请检查以下代码：

<!DOCTYPE html>
<html>
    <head>
        <title>JQM 1.4.2</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />

    </head>
    <body>

    <div data-role="page" id="one">
        <div data-role="content">
            <div id="checkboxComponent"></div>               
            <div id="radioComponent"></div>
        </div>
    </div>  

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>  
    <script>        
        var checkBoxArray = ["Car","Bike","Land"];
        var radioBtnArray = ["Car","Bike","Land","House","Farm"];       

        function createComponent(type, element, data) {
            $("#"+element).html('<div data-role="controlgroup" class="controlGruopDiv"></div>');
            for(var i=0; i<data.length; i++){
                $(".controlGruopDiv").append('<input type="' + type + '" name="' + type + '" id="' + type + i + '"><label for="' + type + i + '">' + data[i] + '</label>');
            };
            $("#"+element).trigger('create');           
        };

        $(document).on("pagecreate", "#one", function(){              
           createComponent("radio", "radioComponent", radioBtnArray);
           createComponent("checkbox", "checkboxComponent", checkBoxArray);
        });
    </script>   
    </body>
</html>

组件按预期呈现。但问题是，也会创建一些重复的组件。如果我创建任何组件，无论是复选框还是收音机，（评论这一行 createComponent("checkbox", "checkboxComponent", checkBoxArray); 或 createComponent("radio", "radioComponent", radioBtnArray); 并检查）它被正确渲染了。

我不知道代码有什么问题。

任何人都可以建议在运行中创建 JQM 小部件/组件的正确方法，并建议我哪个选项可以在 android 移动设备中提供快速和良好的响应，无论是动态创建组件还是使用静态组件...检查下面的链接 https://stackoverflow.com/questions/23341638/jquery-mobile-dynamic-components-vs-static-components

提前致谢。

【问题讨论】：

标签： android jquery performance jquery-mobile

【解决方案1】：

问题是您按类将对象插入到控制组中。因此，第二个调用会找到 2 个具有该类的控制组并创建您所看到的重复项。试试这个：

function createComponent(type, element, data) {
    var $cgdiv = $('<div data-role="controlgroup" class="controlGruopDiv"></div>');
    for (var i = 0; i < data.length; i++) {
        $cgdiv.append('<input type="' + type + '" name="' + type + '" id="' + type + i + '"><label for="' + type + i + '">' + data[i] + '</label>');
    };    

    $("#" + element).empty().append($cgdiv).enhanceWithin();
};

此代码在内存中创建控制组 div，附加输入，然后将其添加到 DOM 并对其进行增强。

这是一个DEMO

【讨论】：

谢谢ezanker...！它工作正常...检查下面的链接stackoverflow.com/questions/23341638/… 为我们提供了在 android 手机中的快速和良好的性能...
不客气。对于性能差异，您需要在支持的设备上进行测试。我不知道答案...
好的...再次感谢您的宝贵回答...！