单击jQuery更改样式

Question

我正在尝试做一个待办事项列表应用程序.当我点击类"检查"的跨度,然后我想应用一种风格.然后跨度的类将更改为"取消选中".单击取消选中后,之前的样式将恢复.这是我到目前为止所做的html和jquery.

问题:问题是当我第一次单击它工作的范围时"取消选中"类被删除并且"检查"类被添加.然后第二部分不起作用.我怀疑第二部分不起作用,因为当document.ready()运行时,"check"类不在dom中.

任何帮助将不胜感激!谢谢!

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

});

---

解决:

不得不使用live();因为我正在动态添加dom.这是最终代码(将样式放在类中):

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

你是对的.由于'uncheck'类被动态添加到DOM,因此您需要使用jQuery live API.试试这个:

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

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

});