• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

176
Views
addEventListener dentro de una clase siempre se ejecuta en el primer elemento

Tengo este código, se trata de deshabilitar y habilitar un botón de un formulario de acuerdo con la entrada de su casilla de verificación. Se está ejecutando en diferentes páginas, puede ver las dos últimas líneas donde recorro los formularios en la página, todo funciona bien cuando hay uno en la página, sin embargo, en las páginas donde hay más de un formulario, no funciona. No importa qué casilla de verificación marque (la segunda o la tercera, por ejemplo), siempre afecta al primer botón.

puede notar que hay dos declaraciones "console.log", la primera devuelve el elemento de entrada correcto (por lo que cuando hay dos formularios en las páginas, puede ver en la consola que los elementos hacen referencia a las entradas correctas en el DOM), sin embargo , el segundo siempre muestra un elemento en la consola que hace referencia a la primera entrada en el DOM.

Supongo que hay algo mal con la forma en que agrego el detector de eventos, ¿alguna sugerencia para que funcione?

 class Steps { constructor(el) { this.el = el; this.bindDOM(); this.bindStepEvents(); } bindDOM() { this.checkboxSelectorStep = this.el.querySelector('.radio-selector-steps-enable'); this.submit = this.el.querySelector('button[type=submit]'); } bindStepEvents() { console.log(this.checkboxSelectorStep); // returns the correct element this.checkboxSelectorStep.addEventListener('click', (ev) => { console.log(this.checkboxSelectorStep); // always returns the first element if (ev.target.checked) { this.submit.removeAttribute('disabled'); } else { this.submit.setAttribute('disabled', ''); } }); } } const forms = Array.from(document.querySelectorAll('.radio-selector-steps-form')); forms.map(form => new Steps(form));
 <form method="get" class="radio-selector-steps-form"> <input type="checkbox" name="checkbox-selector-step" id="checkbox-selector-step" class="radio-selector-steps-enable"> <label for="checkbox-selector-step"><span>some text</span></label> <button type="submit" disabled="">button text</button> </form> <form method="get" class="radio-selector-steps-form"> <input type="checkbox" name="checkbox-selector-step" id="checkbox-selector-step" class="radio-selector-steps-enable"> <label for="checkbox-selector-step"><span>some text</span></label> <button type="submit" disabled="">button text</button> </form>

almost 3 years ago · Juan Pablo Isaza
2 answers
Answer question

0

El problema era que ambas entradas tenían la misma identificación, y las etiquetas hacen referencia a esa identificación, por lo que presionar la entrada en sí funciona bien, pero cada vez que se hace clic en la etiqueta, se llama al primer oyente.

(debido al estilo, en mi caso no era posible hacer clic en la entrada, por lo que siempre terminaba con un comportamiento incorrecto hasta que intentaba crear un fragmento SO y detectaba el problema)

Esperando que esto pueda ayudar a alguien.

almost 3 years ago · Juan Pablo Isaza Report

0

Debe usar querySelector All en lugar de querySelector

 bindDOM() { this.checkboxSelectorStep = this.el.querySelectorAll(STEPS_ENABLE_CHKBOX); this.submit = this.el.querySelector(STEPS_FORM_SUBMIT); } bindStepEvents() { console.log(this.checkboxSelectorStep); this.checkboxSelectorStep.forEach(function(elem) { elem.addEventListener('click', (ev) => { console.log(this.checkboxSelectorStep); if (ev.target.checked) { this.submit.removeAttribute('disabled'); this.update(JSON.parse(this.steps[0].primaryInput.value)) } else { this.submit.setAttribute('disabled', ''); } }); });
almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error