Предотвращение действия css после нажатия на кнопку сохранения

Question

У меня проблема после нажатия кнопки сохранения, потому что я все еще могу изменить стиль таблицы tr td при щелчке. Что нужно добавить, чтобы это не произошло после нажатия кнопки «Сохранить». Заранее спасибо.

<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 1

Вы можете использовать flag variable и проверить его при редактировании.

$(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/