JQuery Trigger click无效：无法触发首个年份元素点击事件

核心问题 #

触发点击的代码执行时机早于点击事件处理器的绑定时机。

你把$("#years > span > a").eq(0).trigger("click")直接放在JS文件末尾，但如果你的事件绑定代码（$("#years > span > a").on('click', ...)）是包裹在$(document).ready()或类似DOM就绪回调中，就会出现：触发代码先执行，此时元素虽然存在，但点击事件还没被绑定到元素上，所以模拟点击不会触发任何逻辑，也不会报错。

解决方案 #

方案1：调整代码顺序，统一放在DOM就绪回调中

把事件绑定和触发代码都放到$(document).ready()里，确保先绑定事件再触发点击：

$(document).ready(function() {
  // 先绑定点击事件处理器
  $("#years > span > a").on('click', function(e) {
    e.preventDefault();

    $.ajax({
      url:'postsByYear.php',
      type:"GET",
      data:{
        year:$(this).text()
      },
      dataType:"html",
      success:function(data)
      {
        $('#view-posts').fadeOut(500, function() {
          $(this).html(data).fadeIn(500);
          setMonths();
        });
      },
      error:function(error) {
        alert('System Error');
      }
    });
  });

  // 再触发第一个元素的点击
  $("#years > span > a").eq(0).trigger("click");
});

方案2：抽离业务逻辑，直接调用（更推荐）

把加载年份文章的AJAX逻辑抽成独立函数，初始化时直接调用该函数，无需模拟点击，逻辑更清晰：

// 抽离加载逻辑
function loadPostsByYear(year) {
  $.ajax({
    url:'postsByYear.php',
    type:"GET",
    data:{ year: year },
    dataType:"html",
    success:function(data) {
      $('#view-posts').fadeOut(500, function() {
        $(this).html(data).fadeIn(500);
        setMonths();
      });
    },
    error:function(error) {
      alert('System Error');
    }
  });
}

$(document).ready(function() {
  // 绑定点击事件，调用抽离的函数
  $("#years > span > a").on('click', function(e) {
    e.preventDefault();
    loadPostsByYear($(this).text());
  });

  // 初始化加载第一个年份的内容
  loadPostsByYear($("#years > span > a").eq(0).text());
});

额外验证 #

确认你的选择器$("#years > span > a")确实能正确选中目标元素，可以在控制台执行console.log($("#years > span > a").eq(0))，如果输出的jQuery对象包含目标元素，说明选择器没问题，问题确实出在执行顺序上。

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