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>
change
to
with space, Jquery can not find the element