cómo vivir poblar div usando tipos de entrada html generados dinámicamente

Estoy tratando de poblar div con la opción de seleccionar, pero realmente no ahora por dónde empezar …

Tengo un código para editar en vivo el “título” del div, pero ahora quiero agregar a un div específico su opción …

Aquí está el código que tengo por ahora:

var rooms = $("#howmanyrooms").val(); var roomcounter = 1; $(".design-your-system-page-playground-container").show(); for (var i = 0; i < rooms; i++) { // $("
Room-" + roomcounter++ + "
").appendTo(".housecontainer"); // $("Room-" + roomcounter + " name 

").appendTo(".infoncontainer"); // $("
Room-" + roomcounter + "
").appendTo(".design-your-system-page-house"); $("Room-" + roomcounter + " name &nbspHeatingRadiatorUnderfloorElectric 0123456789 Do you want the room to be smart (footprint) ?Yes No

").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()); });

como puede ver, cuando hago clic en el botón, anexaré al padre tantas divisiones secundarias como el valor escrito en el cuadro de texto y también crearé el mismo número de “fila” que contiene el nombre y otra opción (dos selecciono y una radio) ya puedo editar el nombre del div ralativo, pero ahora quiero agregar a ese div también las otras opciones

aquí un jsfiddle para ayudarte a entender lo que tengo y lo que quiero: http://jsfiddle.net/3cyST/

si no está claro por favor dígame. Gracias

por favor revisa este violín:

hice que tu variable target global para que sea reutilizable, también agregué una clase para tu primer elemento select que está selecting

Lo he actualizado y ahora agrega el valor de tu prueba en el cambio usando:

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

puedes trabajar por el rest ahora

EDIT ( para la pregunta de OP en el comentario ):

para obtener el valor del botón de opción, te daré 2 formas:

en Javascript :

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

en jQuery :

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

dale a seleccionar una identificación, luego usa

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

… lo mismo para los botones de radio y otras opciones … también tenga en cuenta que los botones de opción no deben tener diferentes nombres:

 Yes No 

otra cosa para la reabilidad del código: intente usar una plantilla …. simplemente ponga un con una identificación en el código … use alguna syntax distintiva para poner marcadores de posición en ella, y reemplácelos en tiempo de ejecución:

HTML:

  

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, "\\$&"); } 

Fiddle: http://jsfiddle.net/3cyST/4/