jQuery .each仅对首个元素生效：多按钮HTML预加载失败求助

你的问题根源在于没有正确遍历所有的.ajax-link元素，而是直接取了第一个匹配元素的属性值，导致后续按钮无法获取各自对应的加载地址和目标容器。

具体问题点 #

当你执行var thisLink = $("a.ajax-link");时，虽然拿到了所有匹配的链接元素，但紧接着调用thisLink.attr("data-href")和thisLink.data("ajaxtarget")时，jQuery只会返回第一个元素的对应属性值。这就意味着所有按钮都在尝试用第一个链接的地址加载内容到第一个链接指定的目标容器里，自然只有第一个按钮能正常工作。

修正后的代码 #

$(document).ready(function () {
  // 遍历每一个.ajax-link元素
  $("a.ajax-link").each(function() {
    // 针对当前元素获取对应的属性
    var $currentLink = $(this);
    var targetUrl = $currentLink.attr("data-href");
    var targetSelector = $currentLink.data("ajaxtarget");
    
    // 确保目标选择器有效再执行加载
    if (targetSelector && targetUrl) {
      $(targetSelector).load(targetUrl, function(response, status, xhr) {
        if (status === "success") {
          console.log("内容加载成功：", targetSelector);
        } else {
          console.error("加载失败：", xhr.status, xhr.statusText);
          // 可选：加载失败时显示提示
          $(targetSelector).html("<p>内容加载失败，请稍后重试</p>");
        }
      });
    }
  });
});

关键改进点 #

• 用.each()遍历所有.ajax-link，确保每个按钮都能独立处理
• 针对当前遍历的元素（$(this)）获取专属的data-href和ajaxtarget，避免属性值复用
• 增加了有效性判断，防止空的选择器或地址导致错误
• 补充了错误处理逻辑，方便调试和给用户反馈

额外优化建议 #

如果多个按钮指向同一个目标地址，可以考虑缓存加载后的内容，避免重复请求：

$(document).ready(function () {
  var contentCache = {};
  
  $("a.ajax-link").each(function() {
    var $currentLink = $(this);
    var targetUrl = $currentLink.attr("data-href");
    var targetSelector = $currentLink.data("ajaxtarget");
    
    if (targetSelector && targetUrl) {
      // 检查缓存中是否已有内容
      if (contentCache[targetUrl]) {
        $(targetSelector).html(contentCache[targetUrl]);
        console.log("使用缓存内容：", targetSelector);
      } else {
        $(targetSelector).load(targetUrl, function(response, status, xhr) {
          if (status === "success") {
            contentCache[targetUrl] = response;
            console.log("内容加载成功并缓存：", targetSelector);
          } else {
            console.error("加载失败：", xhr.status, xhr.statusText);
            $(targetSelector).html("<p>内容加载失败，请稍后重试</p>");
          }
        });
      }
    }
  });
});

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