如何使用动态生成的html输入类型实时填充div

Question

我正在尝试使用选择选项填充div，但我现在真的不知道从哪里开始...

我有一些代码可以实时编辑div的“标题”，但是现在我想将其选项添加到特定的div ...

这是我现在拥有的代码：

 var rooms = $("#howmanyrooms").val();
            var roomcounter = 1;
            $(".design-your-system-page-playground-container").show();
            for (var i = 0; i < rooms; i++) {
                //    $("<div class='appendeddiv'>Room-" + roomcounter++ + "</div>").appendTo(".housecontainer");
                //    $("<span>Room-" + roomcounter + " name</span>&nbsp;<input type='text' placeholder='name' id='room-" + roomcounter + "-id'></div></br>").appendTo(".infoncontainer");
                //
                $("<div class='design-your-system-page-rooms targetDiv_" + roomcounter + "'>Room-" + roomcounter + "</div>").appendTo(".design-your-system-page-house");
                $("<span>Room-" + roomcounter + " name</span>&nbsp;<input type='text' placeholder='name' id='room-" + roomcounter + "-id' class='textInput' lang='targetText_" + roomcounter + "'>&nbsp<select>Heating<option value='radiator'>Radiator</option><option value='underfloor'>Underfloor</option><option value='electric'>Electric</option></select>&nbsp;<select class='design-your-system-number-of-radiator-select'><option value='0'>0</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option><option value='8'>8</option><option value='9'>9</option></select>&nbsp;<span>Do you want the room to be smart (footprint) ?<input type='radio' name='smart-yes' value='smart-yes'>Yes</input>&nbsp;<input type='radio' name='smart-no' value='smart-no'>No</input></div></br>").appendTo(".design-your-system-page-edit-room-container");
                roomcounter++;
            };
            if ($('.design-your-system-page-house').find('.design-your-system-page-rooms').length) {
                $("#buttonaddrooms").hide();
            }

            $("input.textInput").on("keyup", function () {
                var target = $(this).attr("lang").replace("Text", "Div");
                $("." + target).text($(this).val());
            });

如您所见，当我单击按钮时，我会将与在文本框中键入的值一样多的子div附加到父项，并且我还将创建相同数量的“行”，其中包含名称和其他选项（两个select和收音机）我已经可以实时编辑ral div的名称，但是现在我想在该div中添加其他选项

这是一个jsfiddle，可帮助您了解我拥有的东西和想要的东西： http : //jsfiddle.net/3cyST/

如果不清楚，请告诉我。 谢谢

Answer 1

请检查此小提琴：

我提出的target变量全球受到重用，我还添加了类为第一个select元件，其selecting

ive更新了它，现在它使用以下命令附加了onchange测试的值：

 $("select.selecting").on("change", function () {
                $("." + target).append($(this).val());
            });

您现在可以继续工作。

编辑 （ 关于评论的OP问题 ）：

为了获得单选按钮的价值，我将为您提供2种方法：

在Javascript ：

if (document.getElementById('ID_OF_RADIO').checked) {
  rate_value = document.getElementById('ID_OF_RADIO').value;
}

在jQuery ：

$("input[name=RADIO_NAME]:checked").val();

Answer 2

给选择一个ID，然后使用

$("#id").on("change",function(){
    console.log(this.value);
    //whatever you want to do with the value
})

...与单选按钮和其他选项相同...也请注意，单选按钮不应使用不同的名称：

<input type='radio' name='radio_{put id here}' value='yes'>Yes</input>
<input type='radio' name='radio_{put id here}' value='no'>No</input>

代码可读性的另一件事：尝试使用模板...。只需在代码中放入带id的<noscript> ...使用一些独特的语法将占位符放入其中，并在运行时替换它们：

HTML：

<noscript id="template">
    RoomName: <input type="text" id="roomName_%ROOMID%" />
    Do you want...
    <input type='radio' name='radio_%ROOMID%' value='yes'>Yes</input>
    <input type='radio' name='radio_%ROOMID%' value='no'>No</input>
</noscript>

JS：

for (var i = 0; i < rooms; i++) {
    var tplcode = $("#template").html();
    tplcode = tplcode.replaceAll("%ROOMID%",roomcounter);
    $($.pareHTML(tplcode)).appendTo(".design-your-system-page-edit-room-container");

    $("input[name='radio_"+roomcounter+"']").on("change",function(){
        console.log("user wants:" + $("input[name='radio_"+roomcounter+"'][checked]").val())
    });
    roomcounter++;
}



// these functions help replacing multiple occurances
String.prototype.replaceAll = function(find,replace){
    return this.replace(new RegExp(escapeRegExp(find), 'g'), replace);
}

//escapse all regEx chars, so the string may be used in a regEx
function escapeRegExp(str) {
    return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
}

小提琴： http ： //jsfiddle.net/3cyST/4/