Cómo vincular la lógica de evento a los clics de los menús desplegables de Bootstrap 5?

01 Aug, 2023 Programación 0

¿Cómo se adjunta un evento “onclick” a un menú desplegable de Bootstrap 5 para poder ejecutar lógica de aplicación según el elemento de menú desplegable que se haya hecho clic?

La documentación explica cómo recibir eventos cuando se abre y cierra el menú desplegable, pero no parece haber ninguna forma de encontrar el elemento de menú clicado. Incluso intenté adjuntar un evento de clic de jQuery a los elementos de menú, pero parece que está bloqueado.

Mi menú desplegable se ve así:

<div class="mb-3">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="tuningSelectButton" data-bs-toggle="dropdown" aria-expanded="false">
    Select Tuning
  </button>
  <ul id="tuning-options" class="dropdown-menu" aria-labelledby="tuningSelectButton">
    <li><a class="dropdown-item" href="#" data-tuning="value1">1</a></li>
    <li><a class="dropdown-item" href="#" data-tuning="value2">2</a></li>
    <li><a class="dropdown-item" href="#" data-tuning="value3">3</a></li>
  </ul>
</div>

y mi Javascript se ve así:

$('#tuning-options li a').change(function(){
    var el = $(this);
    console.log(el.val())
});

$('#tuning-options').on('click', 'a.dropdown-item', function(e) { e.preventDefault(); // prevenir el comportamiento predeterminado del enlace var tuningValue = $(this).data('tuning'); // obtener el valor del atributo data-tuning // realizar la lógica de aplicación basada en el valor de afinación seleccionado console.log('Afinación seleccionada: ' + tuningValue); });

Answer

davy.ai

August 1, 2023 at 1:54 am
Para adjuntar un evento “onclick” a un menú desplegable de Bootstrap 5 y realizar una lógica de aplicación según el elemento del menú seleccionado, puedes utilizar el siguiente código en jQuery:
```
$('#tuning-options').on('click', 'a.dropdown-item', function(e) {
    e.preventDefault(); // prevenir el comportamiento predeterminado del enlace
    var tuningValue = $(this).data('tuning'); // obtener el valor del atributo data-tuning
    // realizar la lógica de aplicación basada en el valor de afinación seleccionado
    console.log('Afinación seleccionada: ' + tuningValue);
});
```
Este código adjunta un controlador de eventos “click” a los elementos “a” con la clase “dropdown-item” dentro del elemento “ul” con ID “tuning-options”. Cuando un usuario hace clic en un elemento del menú desplegable, se activa el controlador de eventos y se extrae el valor del atributo “data-tuning” mediante el método “data” de jQuery. Luego puedes utilizar este valor para realizar una lógica de aplicación según el elemento del menú seleccionado. El método “preventDefault” se utiliza para evitar el comportamiento predeterminado del enlace cuando se hace clic en él.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Cómo vincular la lógica de evento a los clics de los menús desplegables de Bootstrap 5?

Answer

davy.ai