Hola a todos amigos.
Uso datatables searchbuilder en mi proyecto.
En Searchbuilder, después de seleccionar el campo que es el tipo de fecha, se muestra un selector de fecha. Pero el evento al hacer clic en los botones de fecha y hora del selector de fecha no se activará.
Estoy seguro de que el selector que elegí es correcto. Porque con este selector puedo cambiar los botones en el color de fondo del css. Pero con el mismo selector, el clic del evento jquery no se activa.
¿Cómo puedo saber por qué sucedió esto?
Parte de Dom:
... ... <td class="selectable"> <button class="dt-datetime-button" type="button"> <span>23</span> </button> </td> ... ...Ninguno de los siguientes eventos será disparado:
$('td.selectable').on('click', function () { console.log(1); }); $('td.selectable').click(function () { console.log(2); }); $(document).on('click', 'td.selectable', function () { console.log(3); }); $(document).click('td.selectable', function () { console.log(4); });Por supuesto, ninguno de los eventos anteriores funciona para los tres selectores posibles. Eso significa los siguientes tres selectores:
'td.selectable'
'td.selectable button.dt-datetime-button'
'td.selectable button.dt-datetime-button span'
Con estos selectores puedo cambiar el color de fondo. ¡Pero los eventos de jquery no se disparan!
td.selectable { background-color: red; }¿Es posible que la propia biblioteca datatables searchbuilder deshabilite mis eventos por la fuerza? Si es así, ¿cómo puedo estar seguro? ¿Cómo puedo evitar que se deshabiliten mis eventos?
Si el problema es de otro lado, gracias por orientarme.
muchas gracias.
La razón es que los elementos de su selector de fechas <td> se insertan en el DOM solo cuando el selector de fechas se muestra realmente (y de hecho lo mismo sucede con la tabla de calendario completa del selector de fechas y también con el elemento de entrada).
Cuando se cierra el selector de fecha, toda la tabla de calendario , junto con sus elementos <td> , se elimina del DOM (junto con sus posibles detectores de eventos).
Por lo tanto, debe adjuntar los oyentes cada vez que se muestra el selector de fecha, y solo DESPUÉS de que esté visible . De lo contrario, no se adjuntará ningún detector de eventos.
Sugeriría, en casos como este, usar el patrón de delegación de eventos para vincular al oyente al elemento principal y verificar el objetivo real que activó el evento.
Mire este fragmento donde adjunto un 'mouseup' event al contenedor principal .dtsb-searchBuilder :
const data = [ {date: "2021-10-06", name: "Thomas", position: "Developer"}, {date: "2020-05-03", name: "James", position: "IT Manager"}, {date: "2018-03-19", name: "Barney", position: "CEO"}, {date: "2020-04-22", name: "Thomas", position: "Junior Developer"} ]; $(function() { $('#myTable').DataTable({ data: data, columns: [ {data: "date", title: "Date"}, {data: "name", title:"Name"}, {data: "position", title:"Position"}, ], autoWidth: false, searchBuilder: { // configutation }, dom: 'Qfrtip' }) // attach event listener to parent element (event delegation) $('.dtsb-searchBuilder').on('mouseup', function(event) { const parentIdentifier = event.target.closest('td.selectable'); // identify closest td.selectable if(parentIdentifier) { console.log(`You clicked on this day: ${parentIdentifier.innerText}`); } }) }) body { width: 80%; margin: auto } #myTable td { text-align: center } <script src="https://cdn.datatables.net/v/dt/jq-3.6.0/dt-1.11.5/date-1.1.2/sb-1.3.2/datatables.js"></script> <link href="https://cdn.datatables.net/v/dt/jq-3.6.0/dt-1.11.5/date-1.1.2/sb-1.3.2/datatables.min.css" rel="stylesheet"/> <table id='myTable'> <thead></thead> <tbody></tbody> </table>Está utilizando un elemento td fuera de una table , por lo que el navegador elimina ese elemento del DOM. Use alguna otra etiqueta como div y funcionará.
$('div.selectable').on('click', function() { console.log(1); }); $('div.selectable').click(function() { console.log(2); }); $(document).on('click', 'div.selectable', function() { console.log(3); }); $(document).click('div.selectable', function() { console.log(4); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="selectable"> <button class="dt-datetime-button" type="button"> <span>23</span> </button> </div>