CODEWITHSUNDEEP
jquery
Ponyo
Ponyo

Reputation: 13

entire <tr> disappears after .click function

Can anybody tell me what I'm doing wrong with my code?

Please understand that I'm just a beginner learning jquery. I'm trying to make a Check List using a <table> where you can add and remove items, and when you click on the check box, a checkmark appears followed by a "done!" contained on another <td>. The check mark disappears once you click on the check box again. you can see my fiddlehere: http://jsfiddle.net/linyingsinc/w6XxP/1/

I've initially set .checked as hidden so that .toggleClass can remove that class when clicked, thus revealing the check mark. It works fine initially, but when I added this bit of jquery: 

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

...the entire <tr> containing <td class="checkbox"> disappears completely after a second. I just want to be able to toggle the checkmark and the "done!" bit on and off.

Upvotes: 1

Views: 119

Answers (1)

adeneo
adeneo

Reputation: 318222

That version of the toggle() function was removed in the latest versions of jQuery, so the toggle() function you're using now toggles visiblity, and just hides or shows everything.

You'll have to create your own toggle function :

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

Upvotes: 1

Related Questions