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

Question

Hi there, 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.

Answer 1

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.

Answer 2

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 http://stackoverflow.com/questions/3329874/eliminate-bouncing-ball-effect-on-slidetoggle/3329949#3329949

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