Question

我想动态创建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移动设备中提供快速和良好的响应，无论是动态创建组件还是使用静态组件......请查看以下链接{{3 }}

提前致谢。

Answer 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

Jquery移动动态组件创建

1 个答案: