Tengo un problema interesante y no puedo entender por qué está sucediendo así. Tengo tablas de datos y los datos vienen después del cambio de selección en una selección, con jquery ajax post. Y tengo la función onclick para selección múltiple. (Debe ejecutarse cuando se hace clic en la tabla y cambia el estilo de las filas, etc.) Lo noté (con depuración); cuando hago clic en la fila después de la primera carga, onclick funciona una vez como se esperaba. Pero haga clic después de la segunda carga (la selección cambió) se ejecuta 2 veces y haga clic después de la tercera carga se ejecuta 3 veces , no entiendo qué está pasando. Así que necesito ayuda.
Aquí está la función de cambio de selección que carga la tabla;
// in doc.ready $('#groupSelect').change(function() { var group = $('#groupSelect').val(); if (!$.fn.DataTable.isDataTable('#questTable')) //this is for first load { GetQuestions(group); } else //this is for after first load { var table = $('#questTable').DataTable(); table.destroy(); table.clear().draw(); GetQuestions(group); } });Y esta es la función GetQuestions() que obtiene datos;
// out of doc ready function GetQuestions(questGroup) { $.ajax({ type: 'POST', dataType: 'json', contentType: 'application/json', url: 'SetAudit.aspx/Questions', data: '{"q_group":"' + questGroup + '"}', success: function(result) { $('#questTable').DataTable({ data: result.d, columns: [{ data: 'q_id' }, { data: 'q_text' }] }); //this click function runs multiple time at 1 click $('#questTable tbody').on('click', 'tr', function() { var table = $('#questTable').DataTable(); var count = table.rows('.selected').count(); $(this).toggleClass('selected'); $('#selectedCount').text('' + table.rows('.selected').count() + ''); }); } }); }No sé si está bien que lo creé en la función de éxito de ajax, pero no funciona en ningún otro lugar. Gracias por adelantado.
El problema se debe a que cada vez que se produce un evento de change en #groupSelect , activa una solicitud AJAX y, en el controlador de success de esa solicitud AJAX, adjunta otro controlador de eventos de click al tr de la tabla. Por eso se duplican.
Para solucionar esto, le sugiero que mueva el controlador de eventos tr fuera del controlador de success y solo lo ejecute una vez al cargar el DOM. Prueba esto:
function GetQuestions(questGroup) { $.ajax({ type: 'POST', dataType: 'json', contentType: 'application/json', url: 'SetAudit.aspx/Questions', data: { q_group: questGroup }, success: function (result) { $('#questTable').DataTable({ data: result.d, columns: [ { data: 'q_id' }, { data: 'q_text' } ] }); } }); } // do this on load *only* $('#questTable tbody').on('click', 'tr', function () { var table = $('#questTable').DataTable(); var count = table.rows('.selected').count(); $(this).toggleClass('selected'); $('#selectedCount').text(table.rows('.selected').count()); });Esto debería funcionar
//this click function runs multiple time at 1 click $('#questTable tbody').off().on('click', 'tr', function() { var table = $('#questTable').DataTable(); var count = table.rows('.selected').count(); $(this).toggleClass('selected'); $('#selectedCount').text('' + table.rows('.selected').count() + ''); });Hay varias formas de resolver el problema.
Eliminar y agregar el elemento DOM de la tabla : Depende de la forma en que construya la tabla de datos. Si está construyendo su tabla de datos solo desde JS, entonces puede seguir este enfoque.
// in doc.ready $('#groupSelect').change(function() { var group = $('#groupSelect').val(); if (!$.fn.DataTable.isDataTable('#questTable')) {// this is for first load GetQuestions(group); } else {//this is for after first load var table = $('#questTable').DataTable(); table.destroy(); table.clear().draw(); // empty the table which will eventually clear all the event handlers $('#questTable').empty(); GetQuestions(group); } }); Usando el evento drawCallback de la tabla de datos junto con jQuery off : puede colocar la función de resaltado de fila en drawCallback
//out of doc ready function GetQuestions(questGroup) { $.ajax({ type: 'POST', dataType: 'json', contentType: 'application/json', url: 'SetAudit.aspx/Questions', data: '{"q_group":"' + questGroup + '"}', success: function(result) { $('#questTable').DataTable({ data: result.d, columns: [{ data: 'q_id' }, { data: 'q_text' }], drawCallback: function(settings) { //this click function runs multiple time at 1 click $('#questTable tbody').off().on('click', 'tr', function() { var table = $('#questTable').DataTable(); var count = table.rows('.selected').count(); $(this).toggleClass('selected'); $('#selectedCount').text('' + table.rows('.selected').count() + ''); }); } }); } }); }Está agregando el enlace al evento de click dentro de su función .change() . De esta manera, agrega un nuevo enlace cada vez, por lo tanto, aumenta el número de llamadas a la función.
La forma adecuada de hacerlo es mover $('#questTable tbody').on('click', 'tr', function () { fuera de GetQuestions .