jQuery not able to update data attribute

Question

I am not able to update data attribute. I have a class .edf which when clicked adds new span tag to the clicked element in dom and updates data attribute data-clck This is working

Now I want that when I click on one of the newly added span element all .edf's should have their data attribute data-clck updated to 0 value. NOT WORKING

Code below and 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>

Welcome to Stack Overflow! The full content of your question must be in your question, not just linked. Links rot, making the question and its answers useless to people in the future, and people shouldn't have to go off-site to help you. Put a minimal reproducible example in the question, ideally using Stack Snippets (the <> toolbar button) to make it runnable. More: How do I ask a good question? — T.J. Crowder
– T.J. Crowder, Commented Aug 19, 2017 at 9:59
What are we supposed to do when we run the snippet? If I click something, I get an input, but then I get stuck -- clicking the red and green blocks do nothing, and doing just about anything else tells me to "deselect". But how? — T.J. Crowder
– T.J. Crowder, Commented Aug 19, 2017 at 10:18

kukkuz · Accepted Answer · 2017-08-19 10:12:03Z

Use event.stopPropagation() to prevent event propagation - so what happens is that when you click on panno the event propagates to the edf which is also triggered.

One pointer - use data('clck') instead of attr('data-clck'). Also note nbal was not evaluating properly - fixed that too.

See demo below:

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>

Collectives™ on Stack Overflow

jQuery not able to update data attribute

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related