无法在checkcookie函数中用$().html()为数据库动态元素赋值

你的checkcookie函数执行时机不对——当它运行时，从数据库加载的动态元素还没被渲染到DOM里，所以jQuery选择器$("#num-" + idd[1])找不到对应元素，自然没法设置内容。而点击事件用了事件委托（绑定在document上），哪怕元素后来才加载，点击时也能触发逻辑，所以能正常工作。

方案一：调整函数执行时机（推荐） #

把checkcookie的调用时机放到动态元素渲染完成之后。比如你是通过AJAX请求数据库数据并渲染页面，就在AJAX的回调里调用该函数：

// 示例：加载数据库数据并渲染的AJAX代码
$.ajax({
  url: '你的数据接口地址',
  method: 'GET',
  success: function(data) {
    // 先执行动态元素渲染逻辑，比如把data转换成带#num-xxx的DOM元素
    renderDynamicItems(data);
    // 元素渲染完成后，再执行checkcookie
    checkcookie();
  }
});

方案二：用DOM监听自动处理（适配不确定加载时机的场景） #

如果无法确定元素何时加载，可以用MutationObserver监听DOM变化，当目标元素出现时自动设置内容：

function checkcookie() {
  var cookiee = document.cookie.split("; ");
  // 先把cookie中目标键值对存入对象，方便后续取用
  const cookieData = {};
  for (let i = 0; i < cookiee.length; i++) {
    var c = cookiee[i];
    if (c.charAt(0) === "f" && c.charAt(1) === "o") {
      var cki = c.split("=");
      var idd = cki[0].split("-");
      cookieData[idd[1]] = cki[1];
    }
  }

  // 监听DOM中新增的元素
  const observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
      mutation.addedNodes.forEach(node => {
        // 检查当前新增节点是否是目标元素
        if (node.id?.startsWith('num-')) {
          const id = node.id.split('-')[1];
          if (cookieData[id]) $(node).html(cookieData[id]);
        }
        // 检查新增节点的子元素中是否有目标元素
        if (node.querySelectorAll) {
          node.querySelectorAll('[id^="num-"]').forEach(el => {
            const id = el.id.split('-')[1];
            if (cookieData[id]) $(el).html(cookieData[id]);
          });
        }
      });
    });
  });

  // 配置监听范围：监听body下所有子节点变化
  observer.observe(document.body, { childList: true, subtree: true });

  // 先处理当前页面已存在的目标元素
  document.querySelectorAll('[id^="num-"]').forEach(el => {
    const id = el.id.split('-')[1];
    if (cookieData[id]) $(el).html(cookieData[id]);
  });
}

调试验证方法 #

可以先在checkcookie里加调试代码，确认元素是否存在：

// 在$("#num-" + idd[1]).html(cki[1]);前加：
const targetEl = $("#num-" + idd[1]);
console.log(`目标元素#num-${idd[1]}是否存在：`, targetEl.length > 0);

如果控制台输出false，就坐实了「元素未加载」的问题，直接用上面的方案解决即可。

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