Tengo este formulario (bootstrap) con tres elementos. A medida que se hace clic en el botón, se agrega otra línea con tres elementos.
<div class="row align-items-center mb-2 mt-2 ms-1 "> <div class="col-5 ps-1 pe-1"> <select class="form-select example-select" id="cmbSelect[]" name="cmbSelect[]"> <option>1</option> <option>2</option> <option>3</option> </select> </div> <div class="col-4 ps-1 pe-1"> <input class="form-control" type="text" name="txtFirst[]"> </div> <div class="col-2 ps-1 pe-1"> <input class="form-control" type="text" name="txtSecond[]" value="3"> </div> <div class="col-1 ps-1 pe-1"> <a href="javascript:void(0);" class="add_button" title="Add one more element"><img src="../img/add-icon.png"/ alt="Add"></a> </div> </div> Me gustaría ejecutar una función JS si se hace clic en el primer elemento cmbSelect[] . La función debe obtener el elemento que desencadenó el evento, porque su elemento seleccionado debe editarse. Además, se debe actualizar el valor del elemento junto al que activó el evento.
¿Cuál es la mejor manera de hacer esto?
Intenté algo como esto :
var example_select = $(".example-select"); var all = $(".example-select").map(function() { this.on("click", function (element) { console.log("clicked"); return element.innerHTML; }); }).get(); console.log(all.join()); Pero example_select está vacío y el evento de clic no se activa...
map no se usa así, obtendrá Uncaught TypeError: this.on is not a function
Solo necesita usar on para escuchar el evento
p.ej
var example_select = $(".example-select"); $('input[type=text]').on('input', function(element) { console.log("input"); }); $('select').on('change', function(element) { const isFirst = $(this).children('option:first-child').is(':selected'); console.log(`The current option val: ${$(this).val()}`); console.log(`Is it the first option: ${isFirst}`); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="row align-items-center mb-2 mt-2 ms-1 "> <div class="col-5 ps-1 pe-1"> <select class="form-select example-select" id="cmbSelect[]" name="cmbSelect[]"> <option>1</option> <option>2</option> <option>3</option> </select> </div> <div class="col-4 ps-1 pe-1"> <input class="form-control" type="text" name="txtFirst[]"> </div> <div class="col-2 ps-1 pe-1"> <input class="form-control" type="text" name="txtSecond[]" value="3"> </div> </div>