jQuery无法更新数据属性答案

【问题标题】：jQuery not able to update data attributejQuery无法更新数据属性
【发布时间】：2017-08-19 09:56:00
【问题描述】：

我无法更新数据属性。我有一个类.edf，当点击它时，它会向dom中点击的元素添加新的span标签并更新数据属性data-clck这是有效的

现在我希望当我单击新添加的 span 元素之一时，所有 .edf 的数据属性 data-clck 应更新为 0 值。 不工作

  var pans = "<span class='panok'></span><span class='panno'></span>";
  var input1 = "<input name='vendor_service_item' type='text' class='in_cell_input' value='";
  var input2 = "'>";
  var bal;
  $('.edf').click(function(){
    var dis = $(this);
    var clck = dis.attr('data-clck');
    if(clck == 0){
      $('.edf').each(function(){$(this).attr('data-clck','1');});
      bal = dis.html().toString();
      var nbal;
      if (bal.includes('$')){nbal = bal.replace('$','')}
      dis.html(input1+nbal+input2+pans);
      dis.attr('data-clck','2');
    }// if end
    else if(clck == 2){}
    else if(clck == 1){alert("Please deselect current cell to select other cells");}
  });

  $('.edf').on('click', '.panno', function(){
    var tis = $(this);
    tis.parent().html(bal);
    $('.edf').each(function(){$(this).attr('data-clck','0');});
  });//panno click end

.edf{text-align:center;position:relative;}
.edf:hover{cursor:pointer;cursor:hand;}
  .panok{
    position:absolute;
    top:0;
    right:0;
    width:12px;
    height:12px;
    background-color: #6dc777;
  }
  .panno{
    position:absolute;
    bottom:0;
    right:0;
    width:12px;
    height:12px;
    background-color: #FF6666;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table class="tableizer-table" id="rebillable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Quantity</th>
      <th>Amount</th>
    </tr>  
  </thead>
  <tbody>
    <tr>
      <td>Some Name</td>
      <td class="edf" data-avsid="b0sds00001" data-clck='0'>1</td>
      <td class="edf" data-avsid="bxsd000001" data-clck='0'>$10.22</td>
    </tr>
  </tbody>
</table>

【问题讨论】：

欢迎来到 Stack Overflow！您问题的全部内容必须在您的问题中in，而不仅仅是链接。链接腐烂，使问题及其答案对未来的人们毫无用处，人们不应该离开现场来帮助你。将minimal reproducible example 放入问题中，最好使用 Stack Snippets（<> 工具栏按钮）使其可运行。更多：How do I ask a good question?
更新了问题
运行 sn-p 时我们应该做什么？如果我点击某个东西，我会得到一个输入，但是我会卡住——点击红色和绿色块什么都不做，而做任何其他事情都会告诉我“取消选择”。但是怎么做呢？

标签： javascript jquery events event-handling

【解决方案1】：

使用event.stopPropagation() 来防止事件传播 - 所以当你点击panno 时，事件传播到edf 这也被触发了。

一个指针 - 使用 data('clck') 而不是 attr('data-clck')。另请注意 nbal 未正确评估 - 也已修复。

请看下面的演示：

var pans = "<span class='panok'></span><span class='panno'></span>";
var input1 = "<input name='vendor_service_item' type='text' class='in_cell_input' value='";
var input2 = "'>";
var bal;
$('.edf').click(function() {
  var dis = $(this);
  var clck = dis.data('clck');
  if (clck == 0) {
    $('.edf').each(function() {
      $(this).data('clck', '1');
    });
    bal = dis.html().toString();
    var nbal = bal.replace('$', ''); // CHANGED THIS
    /*if (bal.includes('$')) {
      nbal = bal.replace('$', '')
    }*/
    
    dis.html(input1 + nbal + input2 + pans);
    dis.data('clck', '2');
  } // if end
  else if (clck == 2) {} else if (clck == 1) {
    alert("Please deselect current cell to select other cells");
  }
});

$('.edf').on('click', '.panno', function(e) {
  e.stopPropagation(); // ADDED THIS
  var tis = $(this);
  tis.parent().html(bal);
  $('.edf').each(function() {
    $(this).data('clck', '0');
  });
}); //panno click end

.edf {
  text-align: center;
  position: relative;
}

.edf:hover {
  cursor: pointer;
  cursor: hand;
}

.panok {
  position: absolute;
  top: 0;
  right: 0;
  width: 12px;
  height: 12px;
  background-color: #6dc777;
}

.panno {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  background-color: #FF6666;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tableizer-table" id="rebillable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Quantity</th>
      <th>Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Some Name</td>
      <td class="edf" data-avsid="b0sds00001" data-clck='0'>1</td>
      <td class="edf" data-avsid="bxsd000001" data-clck='0'>$10.22</td>
    </tr>
  </tbody>
</table>

【讨论】：