如何在不触发执行的情况下向jQuery click/onclick函数传递变量

你遇到的问题本质是事件绑定需要传入函数引用，直接加括号会立即执行函数并把返回值作为绑定对象，以下是几种常用解决方案：

方案1：匿名函数包裹（最常用） #

在事件绑定位置套一层匿名函数，内部调用目标方法传参，jQuery的$.each每次迭代会生成独立作用域，不会出现变量共享问题：

$.each(cardArray, function(i,value){
  var activeCard = $('<div class="cardContainer" title="'+cardArray[i]['name']+'" >'+cardArray[i]['damage']+'</div>');
  activeCard.click(function() {
    doStuff(i, activeCard);
  });
});

如果是用for循环迭代，建议把迭代变量声明为let避免闭包变量共享问题。

方案2：使用jQuery内置的事件数据传参（官方推荐） #

jQuery的事件绑定方法支持传入自定义数据，在处理函数中通过event.data读取，完全避免闭包问题：

// 绑定阶段传参
$.each(cardArray, function(i,value){
  var activeCard = $('<div class="cardContainer" title="'+cardArray[i]['name']+'" >'+cardArray[i]['damage']+'</div>');
  activeCard.click({index: i, card: activeCard}, doStuff);
});

// doStuff内部读取参数
function doStuff(e) {
  const i = e.data.index;
  const activeCard = e.data.card;
  // 后续逻辑
}

方案3：使用Function.prototype.bind预传参 #

通过bind方法预设函数执行的参数，生成新的函数引用绑定到事件：

$.each(cardArray, function(i,value){
  var activeCard = $('<div class="cardContainer" title="'+cardArray[i]['name']+'" >'+cardArray[i]['damage']+'</div>');
  // 第一个参数为doStuff执行时的this指向，可按需修改
  activeCard.click(doStuff.bind(this, i, activeCard));
});

方案4：DOM元素挂载数据 #

把需要的参数存在DOM元素的自定义属性上，事件触发时从当前元素读取，适合需要全局复用参数的场景：

$.each(cardArray, function(i,value){
  var activeCard = $('<div class="cardContainer" title="'+cardArray[i]['name']+'" >'+cardArray[i]['damage']+'</div>');
  // 存数据
  activeCard.data('index', i);
  activeCard.click(doStuff);
});

// doStuff内部读取
function doStuff() {
  const i = $(this).data('index');
  const activeCard = $(this);
  // 后续逻辑
}

如果卡牌数量较多、或存在动态新增卡牌的场景，优先使用事件委托方案，不用给每个卡牌单独绑定事件，性能更高、维护更简单：

// 只给卡牌的父容器绑定一次事件，假设父容器id为cardWrap
$('#cardWrap').on('click', '.cardContainer', function() {
  const activeCard = $(this);
  const i = activeCard.data('index');
  doStuff(i, activeCard);
});

// 生成卡牌时只需要存好data属性即可
$.each(cardArray, function(i,value){
  var activeCard = $('<div class="cardContainer" title="'+cardArray[i]['name']+'" >'+cardArray[i]['damage']+'</div>');
  activeCard.data('index', i);
  $('#cardWrap').append(activeCard);
});

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