保存ボタンをクリックした後にCSSアクションが発生しないようにする

Question

保存ボタンをクリックしても問題はありません。クリックするとテーブルのスタイルを変更することができます。保存ボタンをクリックした後にこれが起こらないようにするにはどうすればよいですか。前もって感謝します。

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