页面加载时调用jQuery的click trigger()无法生效问题求助

失效原因排查&修复方案 #

常见失效原因 #

• 点击事件绑定时机晚于触发逻辑：如果你给#one/#two等元素绑定click事件的代码，写在$(document).ready的触发逻辑之后，调用trigger时元素还没有绑定对应的事件，自然不会触发预期效果，需要将事件绑定代码放在触发逻辑之前。
• 测试时未携带查询参数：测试时需要给页面URL补全?code=one这类对应查询参数，否则参数获取为空不会触发任何逻辑。
• 目标元素不存在：确认页面上存在id和参数值完全匹配的元素，没有拼写错误、大小写偏差。

优化后代码 #

优化参数获取函数

增加无匹配参数时的返回值，避免后续判断出现异常：

var getUrlParameter = function getUrlParameter(sParam) {
  var sPageURL = window.location.search.substring(1),
    sURLVariables = sPageURL.split('&'),
    sParameterName,
    i;

  for (i = 0; i < sURLVariables.length; i++) {
    sParameterName = sURLVariables[i].split('=');

    if (sParameterName[0] === sParam) {
      return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
    }
  }
  return false;
};

简化触发逻辑

替换冗余的多分支判断，同时增加元素存在性校验：

// 先完成事件绑定
$('#one, #two, #three, #four, #five').on('click', function() {
  // 此处填写你原本的点击事件业务逻辑
  console.log('触发了' + this.id + '的点击事件')
})

$(document).ready(function () {
  let code_para = getUrlParameter("code");
  if(code_para && $(`#${code_para}`).length) {
    $(`#${code_para}`).trigger('click');
  }
});

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