Preventing css action to occur after clicking on save button
<p>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.</p>

<pre><code>&lt;div class="kalbox"&gt;
   &lt;span class="editing"&gt;edit&lt;/span&gt;
   &lt;span class="saving"&gt;save&lt;/span&gt;
   &lt;div class="kaltext"&gt;

    &lt;h1&gt;January&lt;/h1&gt;

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

$(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();
    }); 
});
</code></pre>