如何获取jQuery each循环渲染的被点击指定div对应的Pumpno值

问题核心原因 #

• 点击事件绑定对象错误：你将点击事件绑定到了所有泵的共同父容器.pump_container上，触发事件时读取的是父容器的属性，自然无法获取到单个点击泵对应的数值
• 动态元素绑定逻辑错误：直接使用.click()绑定仅对页面初始加载时已存在的DOM生效，你通过AJAX动态渲染的泵元素无法被该绑定命中
• 若你之前尝试在循环内直接给每个泵绑定事件，还会存在变量作用域的闭包问题，所有回调都会读取到最后一次循环的pumpNo值，这就是你点任何元素都返回最后一个值的原因
• 你拼接DOM的代码存在冗余无效属性，会导致HTML结构异常，进一步影响属性读取

修复方案 #

第一步：优化DOM渲染逻辑 #

修正无效属性，建议使用HTML5标准的data-*自定义属性存储pumpNo，避免和原生属性冲突：

function pumps() {
  $.get("Pumpstates", {}, function(data) {
    $(".pump_container").empty()
    $.ajaxSetup({
      cache: false
    });
    $.each(data, function(index, value) {
      // 新增data-pump-no属性存储数值，删除原有冗余代码
      $(".pump_container").append('<div class="block_grid_three p' + value.pumpNo + '" data-pump-no="' + value.pumpNo + '" />');
      // 删掉原有拼接中多余的无效属性 ' + value.pumpNo + ' "
      $(".p" + value.pumpNo).append('<span class="pump_button pump_link" data-pump-no="' + value.pumpNo + '"><div class="pump_block' + value.pumpNo + '"></div></span>');
      if (value.state <= 2) {
        $(".pump_block" + value.pumpNo).css('background-image', 'url("/PumpImages/Alien Icons-05.png")');
      } else if (value.state == 3 || value.state == 17) {
        $(".pump_block" + value.pumpNo).css('background-image', 'url("/PumpImages/Alien Icons-17.png")');
      } else if (value.state == 4) {
        $(".pump_block" + value.pumpNo).css('background-image', 'url("/PumpImages/pump_idle.gif")');
      } else if (value.state == 5 || value.state == 32) {
        $(".pump_block" + value.pumpNo).css('background-image', 'url("/PumpImages/pump_calling.gif")');
        $(".pump_block" + value.pumpNo).append(' <span class="pump_no">Pump: ' + value.pumpNo + '</span>');
        $(".pump_block" + value.pumpNo).append(' <span class="Goal"> volume :' + value.volume + '</span>');
        $(".pump_block" + value.pumpNo).append(' <span class="Goal">Price :' + value.price + '</span>');
        $('.p' + value.pumpNo).not(':last').remove();
      }
    });
  })
}

第二步：修改点击事件绑定逻辑 #

使用jQuery事件委托机制绑定动态元素，直接获取当前点击元素的属性，完全规避闭包问题：

$(document).ready(function() {
  // 父容器绑定事件，指定只有点击子元素.pump_link时才触发回调
  $(".pump_container").on("click", ".pump_link", function() {
    // 读取当前点击元素上存储的pumpNo值
    var PumpNo = $(this).data('pump-no');
    $.ajax({
      type: "Post",
      url: "/Account/SelectedPumps",
      cache: false,
      data: {
        pumpNo: PumpNo
      },
      complete: function() {}
    })
  })
})

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