Затухание и повторение с $ (this) .parent (). Find (), повторяющимся

Question

Я создавал веб-приложение с контрольным списком, используя JQuery, и до сих пор оно шло довольно гладко, но сейчас я пытаюсь сделать редактируемый контент.Я хочу сделать это путем затухания текста в списке, а затем затухания в текстовом поле, а затем в обратном порядке после завершения.Контрольный список можно найти здесь: Контрольный список .Как видите, он довольно пустой, с простым добавлением и удалением всего.Когда вы нажимаете кнопку «Добавить», он запускается следующим образом:

$('#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>'
);

Это просто создает элемент списка.

Быстрая перемотка вперед, когда вы добавляете, редактируете и заканчиваете редактирование, все работает нормально.Если вы добавите группу, скажем, 5 сразу, а затем вы попытаетесь отредактировать один из лучших;он просто переключится на текстовое поле, но когда вы закончите редактирование, оно исчезнет и вернется снова.

Я считаю, что это связано с моими селекторами, вот как я работаю с ним:

$(".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);
}
});

Как вы можете видеть, я прыгаю с E (edit) обратно к его родителю и затем ищу редактируемый контент, чтобы увидеть, виден ли он.Я считаю, что это мои селекторы, потому что он повторяет мои console.logs.

Я знаю, что это не самый чистый способ, но я относительно новичок в JQuery и пытаюсь учиться.

Есть идеи?Спасибо.

Answer 1

Я сам не могу поверить, сколько раз я отвечал на это ... один и тот же вопрос, смеется ... Пожалуйста, прочитайте о времени ожидания, интервалах и очереди

вот пример Устранить эффект отскакивающего мячаon slidetoggle

не беспокойтесь, вы не первый, и вы, вероятно, не будете последним:)

Answer 2

Вы должны реструктурировать свой код следующим образом:

$(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();
});
});

Вы должны использовать live () для элементов, которые будут динамически добавляться, таким образом обработчик событий присоединяется к ним, как только они добавляютсястраница.