Django模板中data-target属性通过jQuery读取返回undefined问题咨询

核心故障原因 #

• 变量loanID未声明定义：你在checkQueryParamsForPendingLoans函数中直接使用了loanID变量，但上下文没有对该变量进行赋值、声明，直接调用会抛出引用错误，导致后续逻辑无法执行。
• 选择器与元素属性不匹配：你写的$(#loan-pending-data-${loanID})是把loan-pending-data-前缀作为元素id来查询，但实际你HTML里div的id是loan-pending-{{loan.loan_id}}，loan-pending-data-{{loan.id}}是存在data-target属性里的值，并非元素的id，自然查不到对应元素。
• this指向错误：你使用$(this).data('target')时，checkQueryParamsForPendingLoans是在document.ready里直接调用的，此时this指向全局window对象，不是你要操作的div元素，无法读取到对应元素的data-target属性。
• Django模板变量混淆：你的模板里div的id使用的是loan.loan_id，而data-target属性里拼接的是loan.id，如果业务逻辑里loan.id和loan.loan_id不是相同值，也会导致匹配失败。
• 动态加载元素未做适配：如果该div是页面加载完成后通过AJAX、动态渲染插入的元素，在页面初始load阶段调用查询方法时，元素还未插入DOM，也会查询为空。

修复示例代码 #

第一步：先正确选中目标div，再读取data-target属性 #

如果需要匹配所有loan-pending类的元素，批量读取属性可以用如下写法：

window.addEventListener("load", function () {
  (function ($) {
    "use strict";

    $(document).ready(function () {
      checkQueryParamsForPendingLoans();
     
      function checkQueryParamsForPendingLoans() {
        // 先选中所有loan-pending类的元素，遍历读取data属性
        $(".loan-pending").each(function() {
          // 此时this指向当前遍历的div元素，可以正常读取data-target
          const targetId = $(this).data('target');
          const loanPendingData = $(`#${targetId}`);
          // 后续业务逻辑
          console.log('获取到的target值：', targetId, '对应元素：', loanPendingData);
        })
       }
    })
  })(django.jQuery);
})

第二步：校验Django模板变量一致性 #

确认你的业务逻辑中loan.id和loan.loan_id的对应关系，如果需要两个值一致，统一模板里的变量即可，比如将div的id也改为loan-pending-{{loan.id}}避免混淆。

第三步：动态元素适配 #

如果元素是动态插入的，把方法调用时机放到元素插入DOM的回调逻辑之后即可。

内容的提问来源于stack exchange，提问作者Lutaaya Huzaifah Idris