Velimir Lazarevic Velimir Lazarevic - 6 months ago 10
CSS Question

Preventing css action to occur after clicking on save button

I'm having problem now after clicking on save button, because I can still change styling of table tr td on click. What should I add to prevent this to happen after save button is clicked. Thanks in advance.

<div class="kalbox">
<span class="editing">edit</span>
<span class="saving">save</span>
<div class="kaltext">

<h1>January</h1>

<table>
<thead>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</tr>
</thead>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><div class="day">1</div></td>
<td><div class="day">2</div></td>
</tr>
<tr>
<td><div class="day">3</div></td>
<td><div class="day">4</div></td>
<td><div class="day">5</div></td>
<td><div class="day">6</div></td>
<td><div class="day">7</div></td>
<td><div class="day">8</div></td>
<td><div class="day">9</div></td>
</tr>
<tr>
<td><div class="day">10</div></td>
<td><div class="day">11</div></td>
<td><div class="day">12</div></td>
<td><div class="day">13</div></td>
<td><div class="day">14</div></td>
<td><div class="day">15</div></td>
<td><div class="day">16</div></td>
</tr>
<tr>
<td><div class="day">17</div></td>
<td><div class="day">18</div></td>
<td><div class="day">19</div></td>
<td><div class="day">20</div></td>
<td><div class="day">21</div></td>
<td><div class="day">22</div></td>
<td><div class="day">23</div></td>
</tr>
<tr>
<td><div class="day">24</div></td>
<td><div class="day">25</div></td>
<td><div class="day">26</div></td>
<td><div class="day">27</div></td>
<td><div class="day">28</div></td>
<td><div class="day">29</div></td>
<td><div class="day">30</div></td>
</tr>
<tr>
<td><div class="day">31</div></td>
</tr>
</table>
</div>
</div>

$(document).ready(function() {
$('.editing').click(function(){
$(this).hide();
$('.kalbox').addClass('editable');
$('.kaltext').attr('contenteditable', 'true');
$('table tr td').click(function(){
$(this).css('background-color', '#fff');
$(this).css('color','#444');
});
$('.saving').show();
});


$('.saving').click(function(){
$(this).hide();
$('.kalbox').removeClass('editable');
$('.kaltext').removeAttr('contenteditable');
$('.editing').show();
});
});

Answer

You can use flag variable and check it on editing .

$(document).ready(function() {
    var checkSave = true;
    $('.editing').click(function(){
            if(checkSave){
          $(this).hide();
          $('.kalbox').addClass('editable'); 
          $('.kaltext').attr('contenteditable', 'true'); 
          $('table tr td').click(function(){
                if(checkSave){
                    $(this).css('background-color', '#fff');
                    $(this).css('color','#444');
              }
          });
          $('.saving').show(); 
        }
    });


    $('.saving').click(function(){
        $(this).hide(); 
        $('.kalbox').removeClass('editable');
        $('.kaltext').removeAttr('contenteditable');
        $('.editing').show();
        checkSave = false;
    }); 
});

https://jsfiddle.net/hLx7zxdb/3/

Comments