使用jQuery从AJAX GET返回的动态元素获取data-r值为undefined如何解决

• 核心错误：动态生成删除按钮的HTML语法错误，data-r属性后缺失等于号，浏览器无法识别为合法自定义属性，导致取值为undefined
• 隐性错误：路由模板变量声明在循环外部，第一次循环替换占位符后，后续循环无占位符可替换，所有商品的跳转、删除路由都会复用第一条商品的对应路由
• 优化建议：jQuery读取data-*属性优先使用.data()方法，无需加data-前缀，性能更优

function TopCartVal() {
  // 固定路由模板放在循环外，每次循环生成新的路由变量，不要修改原模板
  const urlTpl = "{{ route('pdt.details', ':id') }}";
  const delTpl = "{{ route('delete_fr.cart', ':id') }}";

  $.getJSON( "{{ route('my.cart','json') }}", function( data ) {
       const Cart = $('#cart_dp_sec_pdt_desc');
       // 每次渲染前先清空原有内容，避免重复追加
       Cart.empty();
       
       $.each(data, function(key , value) {
             // 每次循环基于模板生成新的路由，不修改原模板
             const url = urlTpl.replace(':id', value.product_id);
             const yui = delTpl.replace(':id', value.product_id);
             Cart.append(`
                   <div class="row">
                      <div class="col-xs-4">
                          <div class="image">
                             <a href="${url}">
                               <img src="{{ asset('')}}${value.image}" alt=""/>
                             </a>
                          </div>
                      </div>
                      <div class="col-xs-7">
                          <h3 class="name">
                             <a href="${url}">${value.product_name}</a>
                          </h3>
                          <div class="price">${value.currency}${value.product_price}</div>
                      </div>
                      <div class="col-xs-1 action">
                         <a href="#" 
                            data-r="${value.id}" 
                            class="cart_dp_btn_ctn_delete"> 
                            <i class="fa fa-trash"></i>
                         </a>
                      </div>
                    </div>
                      `);
      });
  });
}
// 删除逻辑
$(document).on('click', '.cart_dp_btn_ctn_delete', function(e){
   e.preventDefault();
   // 用data方法读取属性
   const id = $(this).data('r');
   const delTpl = "{{ route('delete_fr.cart', ':id') }}";
   const yui = delTpl.replace(':id', id);
   console.log(yui);
   console.log(id);
   $.getJSON( yui, function(data){
       TopCartVal();
   });
});

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