Выбор класса из добавленного элемента с помощью jQuery

Question

Я создаю встроенный отредактированный ввод ['text'] фрагмента с помощью jQuery.

HTML, будет выглядеть следующим образом:

<div id="inline"> 
    <span class="item">Color</span> 
</div> 

я застрял здесь (вот мой код):

$('.item').each(function(){ 
    $(this).click(function(){ 
     $(this).hide(); 
     $(this).parent().append(
      '<form method="post" action="" id="inline_form">'+ 
      '<input type="text" value="'+ $(this).html() +'"> <input type="Submit" value="update" />'+ 
      ' <a href="#" class="cancel">Cancel</a></form>' 
     ); 
    }); 
}); 

Я хочу, чтобы привязать событие щелчка к классу '.cancel' что я приложил выше, поэтому, когда я нажимаю отменить, это удалит форму «#inline_form» и показать обратно «.item»

Я попробовал этот

$('.cancel').each(function(){ 
    $(this).click(function(){ 
     $(this).parent('#inline').find('.item').show(); 
     $(this).parent('#inline_form').remove(); 
    }); 
}); 

Но это не сработало. Как выбрать '.cancel', чтобы я мог поместить на него событие click ???

Answer 1

Я немного изменил свой код, и я думаю, что это имеет желаемый эффект:

$('.item').each(function(){ 
     $(this).click(function(){ 
       $(this).hide(); 
       $(this).parent().append(
         '<form method="post" action="" id="inline_form">'+  
         '<input type="text" value="'+ $(this).html() +'"> <input type="Submit" value="update" />'+ 
         ' <a href="#" class="cancel">Cancel</a></form>' 
       ); 

       $('.cancel').each(function(){ 
         $(this).click(function(){ 
         $('#inline').find('.item').show(); 
         $('#inline_form').remove(); 
         }); 
       }); 
     }); 
}); 

Ключевой момент здесь будет то, что вы должны назначить функцию отмены в то же время, как вы создаете ссылку, так как ссылка до этого не существует.

Помните, что создание вызова parent() с использованием строки id является излишним, так как ваши идентификаторы должны быть уникальными. Только один элемент должен иметь определенный идентификатор, поэтому нет смысла искать $(something).parent('#id'), когда $('#id') всегда будет работать так же хорошо.