Mis disculpas si esto se ha preguntado/respondido en otro lugar. Es posible que no conozca la terminología correcta para encontrar los resultados deseados.
Estoy creando una especie de aplicación web y, en un área, un usuario hace clic en un botón, donde se obtiene una variable del número al final de la identificación del botón y luego se pasa a otras funciones para su uso en el procesamiento posterior. El problema con el que me encuentro es que cada vez que se hace clic en botones similares, las variables de los clics anteriores aún se almacenan dentro de esas funciones.
JavaScript no es mi fuerte, así que construí un pequeño violín que demuestra mi problema en una escala mucho más pequeña. Si hace clic en "Enviar 1" en el violín, luego hace clic en ALERT CUST_NUM, un cuadro de alerta mostrará el valor de la variable. Pero si repite ese proceso con Enviar 1 o Enviar 2 (luego haciendo clic en el botón ALERTA nuevamente), en lugar de alertar una sola instancia de la variable, mostrará múltiples cuadros de alerta a su vez. Y así sucesivamente, si hace clic en Enviar 1, luego en ALERT CUST_NUM, luego en Enviar2, etc., de modo que alertará a la cadena de variables en una serie de ventanas. Esperaba que alguien pudiera explicar por qué ocurre esto, ya que esperaba que solo existiera una sola instancia de la variable dentro de la función, que se sobrescribiera cada vez.
$(".submit-btn1").click(function() { var cust_num = parseInt(this.id.replace('test-button-', ''), 10); testFunction(cust_num); }) $(".submit-btn2").click(function() { var cust_num = parseInt(this.id.replace('test-button-', ''), 10); testFunction(cust_num); }) function testFunction(cust_num) { $("#alert-btn").click(function() { alert(cust_num); }) } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="submit-btn1" id="test-button-1"> Submit 1 </button> <br/> <button class="submit-btn2" id="test-button-2"> Submit 2 </button> <br/> <button id="alert-btn"> ALERT CUST_NUM </button>Cada vez que hace clic en submit-btn1 o submit-btn2 , está agregando un nuevo controlador de eventos con cust_num en alert-btn . Si borró los controladores de eventos anteriores como en el siguiente:
function testFunction(cust_num) { $("#alert-btn").off(); $("#alert-btn").click(function(){ alert(cust_num); }) }Entonces solo tendría un controlador de eventos.
Un mejor enfoque sería crear un controlador de eventos único para alert-btn siguiente manera:
var cust_num = 0; $(document).ready(function() { $(".mybuttons").click(function(){ cust_num = parseInt(this.id.replace('test-button-',''), 10); }) $("#alert-btn").click(function(){ alert(cust_num); }) }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="mybuttons" id="test-button-1">Submit 1</button> <br/> <button class="mybuttons" id="test-button-2">Submit 2</button> <br/> <button id="alert-btn">ALERT CUST_NUM</button>La respuesta de jdt es precisa sobre lo que está sucediendo con su código.
Lo que se duplica, como ya se explicó, son los oyentes adjuntos al evento de clic del botón de alerta, cada uno con su instancia de testFunction . En realidad, cada vez que se llama a testFunction , existe una sola instancia de test_num , como se esperaba.
No me gusta desollar gatos ;) y sin embargo
Hay más cosas en el cielo y en la tierra, Horacio, de las que se sueñan en tu filosofía...
JQuery es una hermosa biblioteca, ofrece muchas formas de abordar este simple rompecabezas. Una función particular que en mi humilde opinión merece atención es el enlace .data() a la documentación oficial
Permite:
En esta situación, con cambios menores en el html, estas funcionalidades podrían usarse para llevar el número de cada botón de número y adjuntarlo directamente al botón de alerta.
// listen for click event on any button with an id // that begins with 'test-button' $("button[id^='test-button']").click(function() { // take the value from the attribute of the clicked // element and assign it to the alert button $("#alert-btn").data("lastSelectedNum", $(this).data().num) }) $("#alert-btn").click( function() { // the alert will display the value assigned // or 'unset' if it's undefined alert( $(this).data().lastSelectedNum ?? "unset") }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="test-button-1" data-num=1> Submit 1 </button> <br/> <button id="test-button-2" data-num=2> Submit 2 </button> <br/> <button id="alert-btn"> ALERT CUST_NUM </button>Preferiría un controlador único para los botones de entrada que extraiga la identificación y reemplace el controlador del botón de salida...
$("#test-button-1, #test-button-2").click(function() { const alertWith = +(this.id.match(/\d+$/)[0]); // digits at end of a string $("#alert-btn").off('click').on('click', () => alert(alertWith)); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="submit-btn1" id="test-button-1"> Submit 1 </button> <br/> <button class="submit-btn2" id="test-button-2"> Submit 2 </button> <br/> <button id="alert-btn"> ALERT CUST_NUM </button>