javascript - jQuery无法更新数据属性

我无法更新数据属性。我有一个类.edf，当单击该类时，它将新的span标签添加到dom中的clicked元素并更新数据属性data-clck

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

下面的代码和fiddle if required：

  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>

最佳答案

使用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>