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

});

Answer 2

在添加运行时

时使用jquery live或delegate

http://api.jquery.com/live/

http://api.jquery.com/delegate/

Answer 3

你真的需要一个uncheck课吗？有三种状态check，uncheck和“没有”？摆脱uncheck类可以简化代码。

我愿意：

$('.note-body .some_other_identifier').live('click', function() {
    $(this).parent().toggleClass('check');
});

添加

.some_other_identifier {'text-decoration':'line-through'; 'color':'#5b382e'; }
.check .some_other_identifier { 'text-decoration':'none'; 'color':'#5b382e'; }

到你的CSS。

单击jQuery更改样式

3 个答案: