jqueryeventsclickremoveclass

jQuery click function not working (addClass / removeClass)

I have a hidden submit button. After the button is shown, it is supposed to change the class of two elements (using addClass and removeClass).

But that does not work and I can't figure out why. The code seems fine to me. I have also tried to use toggleClass and I have the same problem.

Please help me fix this!
Thanks in advance!

This is the code: 

$('input[data-act="save"]').click(function(e) {
  e.preventDefault();
  var id2 = $(this).attr("data-c");
  var bkg = $('[data-sel="td ' + id2 + '"]');
  $(bkg).addClass("bg-color-fin");
  $(bkg).removeClass("bg-color");
});
.bg-color {
  color: #ffffff;
  background-color: #329af0;
  text-shadow: 0 1px 0.5px #000000;
}
.bg-color-fin {
  color: #ffffff;
  background-color: #37b24d;
  text-shadow: 0 1px 0.5px #000000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td data-sel="td1" class="text bg-color title2 border-bot" colspan="4">
    </td>
  </tr>
  <tr>
    <td data-sel="td1" colspan="4" class="text bg-color">
      <div data-id="icn">
        <span class="title2"> I. Details</span>
        <span data-sel="sel1" class="r-float r-pad tiny-txt3">0/1</span>
        <input data-sel="sel1" data-c="1" data-act="save" class="inv r-float btn2 btn2-save btn-right" type="submit" value="Salveaza" target="">
      </div>
    </td>
  </tr>
</table>

Solution

  • change

    var bkg = $('[data-sel="td ' + id2 + '"]');

    to

    var bkg = $('[data-sel="td' + id2 + '"]');

    with space, Jquery can not find the element