JavaScript：如何传递带参数的函数作为点击事件处理器且避免页面加载时触发

这问题我太熟了！你当前的核心问题在于：当你写loadPageOfSelectedNavItem('#myFormIdA')时，浏览器会立刻执行这个函数，而不是把它作为点击事件的回调函数保存起来。要解决这个问题，同时保留传递参数的需求，这里有几个实用方案：

方案1：用匿名函数包裹回调调用 #

这是最直观的解决方式，通过匿名函数作为点击事件的回调，只有当按钮被点击时，才会在匿名函数内部调用你的目标函数并传递参数：

(function(){
  buttonA.on('click', function() {
    loadPageOfSelectedNavItem('#myFormIdA');
  });
  buttonB.on('click', function() {
    loadPageOfSelectedNavItem('#myFormIdB');
  });
})();

function loadPageOfSelectedNavItem(formId){
  var form = $(formId);
  $.ajax({
    url : form.attr('action'),
    data: form.serialize(),
    type: "post",
    success: function(response, status, xhr){
      $('#divContainer').html(response); 
    },
    error: function(error){
      console.log(error);
    }
  });
}

这样写的好处是逻辑清晰，新手也能快速理解，完全避免了页面加载时的意外执行。

方案2：使用bind()绑定预设参数 #

如果你不想写大量重复的匿名函数，可以用Function.prototype.bind()来创建一个预设好参数的新函数，这个新函数会在点击时才执行：

(function(){
  buttonA.on('click', loadPageOfSelectedNavItem.bind(null, '#myFormIdA'));
  buttonB.on('click', loadPageOfSelectedNavItem.bind(null, '#myFormIdB'));
})();

// 你的loadPageOfSelectedNavItem函数保持不变
function loadPageOfSelectedNavItem(formId){
  var form = $(formId);
  $.ajax({
    url : form.attr('action'),
    data: form.serialize(),
    type: "post",
    success: function(response, status, xhr){
      $('#divContainer').html(response); 
    },
    error: function(error){
      console.log(error);
    }
  });
}

这里的bind(null, '#myFormIdA')会返回一个新函数，当这个新函数被点击触发时，会自动把#myFormIdA作为第一个参数传给loadPageOfSelectedNavItem。第一个参数null用来绑定函数的this指向，这里我们不需要修改this，所以传null即可。

方案3：事件委托（适合多表单场景） #

如果你的按钮数量很多，推荐用事件委托来简化代码，避免重复绑定。只需要给按钮统一加一个标识属性（比如data-form-id），然后通过父元素统一监听点击事件：

第一步：给按钮添加data属性 #

<button class="form-submit-btn" data-form-id="#myFormIdA">提交表单A</button>
<button class="form-submit-btn" data-form-id="#myFormIdB">提交表单B</button>
<button class="form-submit-btn" data-form-id="#myFormIdC">提交表单C</button>

第二步：用事件委托绑定一次事件 #

(function(){
  // 假设所有按钮都在某个父容器内，这里用document作为示例
  $(document).on('click', '.form-submit-btn', function() {
    // 获取当前按钮对应的formId
    const formId = $(this).data('form-id');
    // 调用目标函数
    loadPageOfSelectedNavItem(formId);
  });
})();

// 你的loadPageOfSelectedNavItem函数保持不变
function loadPageOfSelectedNavItem(formId){
  var form = $(formId);
  $.ajax({
    url : form.attr('action'),
    data: form.serialize(),
    type: "post",
    success: function(response, status, xhr){
      $('#divContainer').html(response); 
    },
    error: function(error){
      console.log(error);
    }
  });
}

这种方式的优势是代码更简洁，后续新增按钮也不需要重新绑定事件，扩展性拉满。

关键提醒 #

记住：事件回调需要的是函数引用（不带括号），如果带括号，浏览器会立即执行函数，并把函数的返回值作为回调（如果你的函数没有返回函数，回调就是undefined，等于没绑定事件）。

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