Выбор класса из добавленного элемента с помощью 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>'
        );
    });
 });

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

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

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

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

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() вызова с использованием строки идентификатора является излишним, поскольку ваши идентификаторы должны быть уникальными. Только один элемент должен иметь заданный идентификатор, поэтому нет смысла искать $(something).parent('#id'), когда $('#id') всегда будет работать так же хорошо.