Changing Style with click in jQuery
<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>
