I'm adding a list of child divs (cards) by looping through an array. I want to create an onclick event listener for each child div (card) of parent div (board).
$.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>but I'm unsure how to find out which child div was clicked and pass it to cardClick()?
I'm also going to be using the child's data-id within cardClick() and I'd like to know how to get this- should I pass it to the function in the on click listener somehow, or do it within the function?
Something like this?
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>Assuming that cardClick() is defined somewhere else, first of all, you would call it with $("#area_myCards > .cardContainer").on('click',cardClick) (without the parenthesis at the end).
That function would get passed an event as its first argument (usually called e), and the event has a property called currentTarget that can be used to see which instance has been clicked.
From MDN:
The
currentTargetread-only property of the Event interface identifies the current target for the event, as the event traverses the DOM. It always refers to the element to which the event handler has been attached, as opposed to Event.target, which identifies the element on which the event occurred and which may be its descendant.
So the cardClick function would be something like:
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
}