手动调用click()函数时，如何向其中传入数据？

问题根源 #

你写的$('#btn1').click({data:5})不是触发已绑定的点击事件，而是给#btn1绑定了一个新的带自定义数据的点击事件处理器——这就是为什么它没触发你原来的逻辑。

两种可行方案 #

方案1：使用trigger()方法触发带数据的点击事件

jQuery的trigger()方法支持在触发事件时传递额外数据，原事件处理器可以通过额外参数接收：

// 定义#btn1的点击处理器，接收传递的数据
$('#btn1').click(function(event, customData){
  console.log(customData); // 输出 {data:5}
  // do something...
})

$('#btn2').click(function(event){
  $('#btn1').click(); // 正常触发无参逻辑
  // 用trigger触发并传递自定义数据
  $('#btn1').trigger('click', [{data:5}]);
})

方案2：提取逻辑为独立函数（更推荐）

如果只是要复用#btn1的业务逻辑，没必要走事件触发的流程，直接把逻辑抽成单独函数，调用时传参更高效清晰：

// 把#btn1的核心逻辑抽成独立函数
function handleBtn1(customData = null) {
  console.log(customData); // 输出 {data:5}（从btn2调用时）
  // do something...
}

// 给#btn1绑定点击事件，调用无参逻辑
$('#btn1').click(function(){
  handleBtn1();
})

$('#btn2').click(function(){
  handleBtn1(); // 调用无参逻辑
  handleBtn1({data:5}); // 调用带参逻辑
})

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