Hola chicos, por favor ayúdenme con este problema. Quiero cambiar la nueva etiqueta de selección agregada. Aquí está mi código
<div id="ugh"> <select onchange="handicap"> <option id=c1> Example (5)</option> <option id="c2"> Example (10)</option> </select> <input id="cap" type="text"> </div> <a id="sigepa" class="fa fa-clone" style="font-size:30px"></a> <script> $('#sigepa').click(function(){ var ako = ''; ako += '<select onchange="handicap();">'; ako += '<option id="c1"> Example (5)</option>'; ako += '<select id="c2"> Example (10)</option>'; ako += '</select>'; ako += '<input id="cap" type="text">'; $('#ugh').append(ako); }); </script> <script> function handicap() { var cap1 = document.getElementById('c1'); var cap2 = document.getElementById('c2'); if(cap1.selected) { document.getElementById('cap').value = 5; } else { document.getElementById('cap').value = 10; } } </script>Por favor ayúdame con este problema. Quiero que cuando agregue una nueva etiqueta de selección, se aplicará el cambio.
Aquí está mi solución. Cambié algunos identificadores y agregué un nuevo div.
<div id="ugh"> <div class="container"> <select class="handicap"> <option value="5"> Example (5)</option> <option value="10"> Example (10)</option> </select> <input class="cap" type="text"> </div>Javascript no identifica los nuevos elementos clonados porque no están en el árbol DOM. Así que tendrás que acceder a ellos así.
También utilicé el atributo de value en las opciones de selección en lugar de las identificaciones individuales, lo que ayuda a reducir una gran cantidad de código innecesario.
<script type="text/jajvascript"> $('#sigepa').click(function(){ // this is not in DOM var ako = ''; ako += '<div class="container">'; ako += '<select class="handicap">'; ako += '<option value="5"> Example (5)</option>'; ako += '<option value="10"> Example (10)</option>'; ako += '</select>'; ako += '<input class="cap" type="text">'; ako += '</div>'; $('#ugh').append(ako); }); $(document).on("change", ".handicap", function () { var value = $(this).val(); // selecting the closest input element $(this).closest('.container').find('.cap').val(value); }); </script>En lugar de crear una cadena, intente crear un nuevo elemento directamente.
ako = document.createElement("select");Luego puede agregar el oyente onChange configurando el atributo para él.
ako.setAttribute("onchange", function(){handicap()});El segundo parámetro de la función setAttribute debe incluirse en una función para que no evalúe su función de desventaja de inmediato.
Puedes intentar construir elementos con jQuery. Puede 'Ejecutar fragmento de código' para ver la demostración.
$(document).ready(function () { $("#sigepa").click(function () { // Check already added select and input, return and do nothing if ($("#cap").length > 0) return; // build select element var select = $("<select>") .append($("<option>").prop("id", "c1").text("Example (5)")) .append($("<option>").prop("id", "c2").text("Example (10)")) .attr('onchange', 'handicap()'); // build input element var input = $("<input>").prop("id", "cap").prop("type", "text"); // append built items to #ugh $("#ugh").append(select).append(input); }); handicap = function () { var cap1 = document.getElementById("c1"); var cap2 = document.getElementById("c2"); if (cap1.selected) { document.getElementById("cap").value = 5; } else { document.getElementById("cap").value = 10; } }; }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="ugh"> </div> <a id="sigepa" class="fa fa-clone" style="font-size:30px">sigepa</a> <script> </script> <script> </script>