Question

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.

Problem: 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.

Any help will be greatly appreciated! Thanks!

HTML:

         <div class="note-body">
                <ol>
                    <li>M2u category shown. M2u category shown M2u category shown M2u category shown.
                        <span title="Delete" class="delete"></span>
                        <span title="Task Done!" class="done"></span>
                        <span class="handle"></span>
                        <span class="handle"></span>
                    </li>
                    <li>M2u category shown</li>
                    <li>M2u category shown</li>
                </ol>
            </div>

jQuery:

    $('.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'});

});

---

RESOLVED:

Had to use the live(); because i am adding dom dynamically. Here is the final code (placed the styles in classes):

$('.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');
   });

Answer 1

You are correct. Since the ‘uncheck’ class is dynamically added to the DOM, you need to use the jQuery live API. Try this:

   $('.note-body ol li span.uncheck').live('click', function(){
            $(this).addClass('check').removeClass('uncheck');

            $(this).parent().css({'text-decoration':'none', 'color':'#5b382e'});

});