Fading out and in with $(this).parent().find() repeating

I've been creating a checklist webapp using JQuery, and so far it has been going pretty smooth, but now I'm trying to make editable content. I want to do this by fading out the text in the list, and fading in the textbox, and then reverse when complete. The checklist can be found here: The Checklist. As you can see it is fairly blank, with a simple add and remove all. When you click add it runs this:

$('#add').click(function(){
$('#checklist').append(
'<li class="item"><span class="text"><cnt class="content">Text</cnt><input type="text" name="tester" class="editor" /><edt class="edit">E</edt></span><c>-</c><input type="checkbox" class="done"/></li>'
);

This creates the list item just fine.

Fast forwarding, when you add one, edit it, and finish editing it works fine. If you add a bunch, say 5 at once, and then you try editing one of the top ones; it will switch to the textbox just fine, but when you finish editing it fades out and back in again.

I believe this has to do with my selectors, this is how I am working it:

$(".text > .edit").click(function(){
console.log ("You're doing it right");
//console.log ($(this).parent());
if ($(this).parent().find('.content').is(':visible') ) { 

var editvar = $(this).parent().find('.content').text();
$(this).parent开发者_如何学编程().find('.content').fadeOut('slow');
$(this).parent().find('input[name="tester"]').val(editvar);
$(this).parent().find('.editor').fadeIn('slow');
//console.log(editvar);

}
//if ($(this).parent().find('.content').is(':hidden') ) { 
else{
console.log("You're doing it wrong");
var editvar = $(this).parent().find('input[name="tester"]').val();
$(this).parent().find('.editor').fadeOut('slow');
$(this).parent().find('.content').text(editvar);
$(this).parent().find('.content').fadeIn('slow');
//console.log(editvar);
}
});

As you can see I am jumping from the E (edit) back to it's parent and then searching for the editable content to see if it is visible. I believe it is my selectors due to it repeating my console.logs.

I know this isn't the most clean way, but I'm relatively new to JQuery and am trying to learn.

Any ideas? Thanks.

I can't believe myself how many times I have answered this... same question lol... Please read about settimeout and intervals and queue

here is an example Eliminate bouncing ball effect on slidetoggle

don't worry your not the first and you probably will not be the last :)

You should restructure your code like this:

$(document).ready(function(){
    $('#add').click(function(){
    $('#checklist').append(
    '<li class="item"><span class="text"><cnt class="content">Text</cnt><input type="text" name="tester" class="editor" /><edt class="edit">E</edt></span><c>-</c><input type="checkbox" class="done"/></li>'
    );
});
$('c').live("click", function(){
    //console.log("remove");
    $(this).parent().remove();
});

$(".done").live("click", function(){
    if ($(this).is(':checked')) {
        $(this).parent().fadeTo('slow', 0.5);
    } else{
      //console.log('test');
      $(this).parent().fadeTo('slow', 1);
    }
});

$(".edit").live("click", function(){
    if ($(this).parent().find('.content').is(':visible') ) { 
        var editvar = $(this).parent().find('.content').text();
        $(this).parent().find('.content').fadeOut('slow');
        $(this).parent().find('input[name="tester"]').val(editvar);
        $(this).parent().find('.editor').fadeIn('slow');    
    }else{
        var editvar = $(this).parent().find('input[name="tester"]').val();
        $(this).parent().find('.editor').fadeOut('slow');
        $(this).parent().find('.content').text(editvar);
        $(this).parent().find('.content').fadeIn('slow');
    }
}); 

$('#RemAll').click(function(){
    $('li').remove();
});
});

You should use live() for elements that will be dynamically added, that way the event handler gets attached to them as soon as they are added to the page.