Estoy agregando una lista de divs secundarios (tarjetas) recorriendo una matriz. Quiero crear un detector de eventos onclick para cada div secundario (tarjeta) del div principal (tablero).
$.each(cardArray, function(i,value){ if(i<9){ var tCard = $('<div class="cardContainer" title="'+cardArray[i]['name']+'" data-id="'+i+'">'+cardArray[i]['damage']+'</div>') $("#area_myCards").append(tCard) } }); $("#area_myCards > .cardContainer").on('click',cardClick()) <div id="area_myCards"></div> pero no estoy seguro de cómo averiguar en qué div secundario se hizo clic y pasarlo a cardClick() ? También voy a usar la identificación de datos del niño dentro de cardClick() y me gustaría saber cómo obtener esto. ¿Debería pasarlo a la función en el oyente de clic de alguna manera, o hacerlo dentro de la función?
¿Algo como esto?
const cardArray = [ {name: 'A', damage: 'A-D'}, {name: 'B', damage: 'B-D'}, {name: 'C', damage: 'C-D'}, {name: 'D', damage: 'D-D'}, {name: 'E', damage: 'E-D'}, {name: 'F', damage: 'F-D'}, {name: 'G', damage: 'G-D'}, {name: 'H', damage: 'H-D'}, {name: 'I', damage: 'I-D'} ]; $.each(cardArray, function(i,value){ if(i<9){ var tCard = $('<div class="cardContainer" title="'+cardArray[i]['name']+'" data-id="'+i+'">'+cardArray[i]['damage']+'</div>') $("#area_myCards").append(tCard) } }); $("#area_myCards > .cardContainer").on('click',e => cardClick(e.target)) const cardClick = (div) => { $(div).toggleClass('clicked'); }; .cardContainer { margin: 2px; padding: 10px; border: 1px solid #eee; } .cardContainer.clicked { background-color: red; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="area_myCards"></div>Suponiendo que cardClick() esté definido en otro lugar, en primer lugar, lo llamaría con $("#area_myCards > .cardContainer").on('click',cardClick) (sin el paréntesis al final).
A esa función se le pasaría un evento como su primer argumento (generalmente llamado e ), y el evento tiene una propiedad llamada currentTarget que se puede usar para ver en qué instancia se ha hecho clic.
Desde MDN:
La propiedad de solo lectura
currentTargetde la interfaz Event identifica el destino actual del evento, ya que el evento atraviesa el DOM. Siempre hace referencia al elemento al que se ha adjuntado el controlador de eventos, a diferencia de Event.target, que identifica el elemento en el que se produjo el evento y que puede ser su descendiente.
Así que la función cardClick sería algo como:
const cardClick = (e) => { const targetInstance = e.currentTarget; // Do stuff with your specific card... // To access data-id: targetInstance.getAttribute('data-id') // or targetInstance.dataset.id }