jQuery动态设置data-src后仍调用原GET服务，如何解决？

问题原因分析 #

1. attr修改属性但未触发重新请求：你用attr修改了DOM上的data-src属性，但如果数据加载逻辑只在页面初始化时读取过一次data-src的值，后续属性变更不会自动触发新的请求。
2. jQuery data()方法的误区：data()是操作jQuery内部的缓存数据，不会同步修改DOM上的data-src属性，所以依赖DOM属性的加载逻辑完全读不到这个修改。

解决方案 #

要解决这个问题，核心是先正确修改DOM属性，再手动触发数据加载逻辑：

1. 正确修改DOM的data-src属性

可以用jQuery或原生JS修改，确保DOM属性确实被更新：

• jQuery方式：

  $('.dataOne').attr('data-src', 'dataOneTwo');
  

• 原生JS方式（更直接）：

  document.querySelector('.dataOne').dataset.src = 'dataOneTwo';
  

2. 修改后重新触发数据加载

不管是你自己写的加载逻辑还是第三方插件，都需要重新执行加载流程：

• 如果是自定义加载函数，封装后重新调用：

  // 封装加载逻辑
  function fetchData(selector) {
    const $el = $(selector);
    const src = $el.attr('data-src');
    // 发起GET请求
    $.get(src, function(response) {
      // 处理返回数据，比如渲染到div里
      $el.html(response);
    });
  }
  
  // 初始化加载
  fetchData('.dataOne');
  
  // 特定条件下切换源并重新加载
  if (/* 你的判断条件 */) {
    $('.dataOne').attr('data-src', 'dataOneOne');
  } else {
    $('.dataOne').attr('data-src', 'dataOneTwo');
  }
  // 关键：重新调用加载函数
  fetchData('.dataOne');
  

• 如果是第三方插件，查看插件文档，找到重新初始化/刷新的方法，比如某些表格插件的refresh()或reload()方法。

总结 #

• 不要依赖data()方法修改DOM上的data-*属性，它只用于内部数据存储。
• 修改属性后必须手动触发加载逻辑，因为初始化时的加载流程不会自动监听属性变化。

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