title: Changing Style with click in jQuery
body: <p>i am trying to make a to do list app. When i click a span with class "check" then i want to apply a style. Then the class of the span will change to "uncheck". When click the uncheck then the previous style will restore. Here is the html and jquery what i have done so far.</p>
  
  <p><strong>Problem:</strong> Problem is when i first click the span it works The "uncheck" class get removed and "check" class get added. Then the second part not works. I suspect the second part don't working because the "check" class is not in the dom when document.ready() is runs.</p>
  
  <p>Any help will be greatly appreciated! Thanks!</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>         &lt;div class="note-body"&gt;
                  &lt;ol&gt;
                      &lt;li&gt;M2u category shown. M2u category shown M2u category shown M2u category shown.
                          &lt;span title="Delete" class="delete"&gt;&lt;/span&gt;
                          &lt;span title="Task Done!" class="done"&gt;&lt;/span&gt;
                          &lt;span class="handle"&gt;&lt;/span&gt;
                          &lt;span class="handle"&gt;&lt;/span&gt;
                      &lt;/li&gt;
                      &lt;li&gt;M2u category shown&lt;/li&gt;
                      &lt;li&gt;M2u category shown&lt;/li&gt;
                  &lt;/ol&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p><strong>jQuery:</strong></p>
  
  <pre><code>    $('.note-body ol li span.check').click(function(){
              $(this).addClass('uncheck').removeClass('check');
  
              $(this).parent().css({'text-decoration':'line-through', 'color':'#5b382e'});
  
      });
  
     $('.note-body ol li span.uncheck').click(function(){
              $(this).addClass('check').removeClass('uncheck');
  
              $(this).parent().css({'text-decoration':'none', 'color':'#5b382e'});
  
  });
  </code></pre>
  
  <hr>
  
  <p><strong>RESOLVED:</strong></p>
  
  <p>Had to use the <code>live();</code> because i am adding dom dynamically. Here is the final code (placed the styles in classes):</p>
  
  <pre><code>$('.note-body ol li span.check').live('click', function(){
              $(this).addClass('uncheck').removeClass('check');
              $(this).parent().addClass('task-done').removeClass('task-notdone');
      });
  
     $('.note-body ol li span.uncheck').live('click', function(){
              $(this).addClass('check').removeClass('uncheck');
              $(this).parent().addClass('task-notdone').removeClass('task-done');
     });
  </code></pre>