jQuery如何获取被点击的子div元素并将其传入点击事件处理函数

现有代码问题说明 #

你当前的事件绑定写法存在错误：

$("#area_myCards > .cardContainer").on('click',cardClick())

这里cardClick后面加了括号，会直接执行该函数，而不是将其作为点击事件的回调传入，需要先去掉括号改为cardClick。

疑问解答 #

1. 如何确定被点击的子元素 #

点击事件的回调函数会默认接收事件对象作为入参，回调内的event.currentTarget就对应触发本次点击的.cardContainerDOM元素，用jQuery包装后即可直接操作该元素。

2. data-id的获取方式 #

不需要在绑定监听器时单独传值，直接在回调函数内部获取即可，代码更简洁易维护。

推荐实现方案 #

因为你的卡片是动态生成的，更推荐使用事件委托的方式绑定事件，将监听器绑定在父元素#area_myCards上，后续新增卡片也不需要重新绑定事件，性能和可维护性更好：

// 遍历生成卡片的逻辑保持不变
$.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').on('click', '.cardContainer', cardClick)

// 点击处理函数
function cardClick(e) {
  // 获取被点击的卡片jQuery对象
  const $currentCard = $(e.currentTarget)
  // 获取data-id属性
  const cardDataId = $currentCard.data('id')
  // 此处写后续业务逻辑
  console.log('点击的卡片data-id为：', cardDataId)
}

内容的提问来源于stack exchange，提问作者dux0r