整个<tr>后.click功能

Question

消失任何人都可以告诉我我做错了我的代码？

请理解，我只是一个初学jquery学习。我正在尝试使用<table>制作检查清单，您可以在其中添加和删除项目，并且当您单击该复选框时，出现复选标记，然后显示“完成！”。载于另一个<td>。再次点击复选框后，复选标记消失。你可以看到我的小提示：http://jsfiddle.net/linyingsinc/w6XxP/1/

我已经最初设置.checked隐藏，所以.toggleClass可以删除该类点击时，从而揭示复选标记。它工作正常开始，但是当我加入这个位的jQuery：

$(this).toggle(function() { 
var itemDone = '<td class="complete">done!</td>'; 
$(this).parent('tr').append(itemDone); 
}); 

...含<td class="checkbox">整个<tr>一秒钟后完全消失。我只是想能够切换复选标记和“完成！”位开启和关闭。

Answer 1

该版本的toggle()函数在最新版本的jQuery中被删除，因此您现在使用的toggle()函数切换可见性，并且隐藏或显示所有内容。

你必须创建自己的切换功能：

$(document).on('click','.checkbox',function() { 
    $(this).find('span').toggleClass('checked'); 
    if ($(this).parent('tr').find('.complete').length) { 
     $(this).parent('tr').find('.complete').remove(); 
    }else{ 
     var itemDone = '<td class="complete">done!</td>'; 
     $(this).parent('tr').append(itemDone); 
    } 
}); 

FIDDLE