Блог

Я пытаюсь создать список текстовых полей с помощью jquery. Что я хочу, так это иметь текст, который при нажатии превращается в текстовое поле. Затем я хочу, чтобы он вернулся к текстовым послесловиям. Моя проблема заключается в том, чтобы сфокусировать динамически созданные текстовые поля, изменить текст текстового поля, удалить и изменить текст. Это мой код:

 $('.l').click(function() {
    $('<input type="text" id="ltb"      class="' $(this).attr("class") '">').insertAfter($(this)).val($(this).val());
    $('#ltb').focus();
    $(this).remove();
})
$('#ltb').blur(function() {
    $('<div id="' $(this).attr("class") '" class="l">' $(this).val() '</div>').insertAfter($(this));
    $(this).remove();
});
  

.l — это текст, а #ltb — текстовое поле. Мне нужно, чтобы #ltb изменил значение, сфокусировался и был удален. Мне нужно .l для изменения после удаления #ltb. Может кто-нибудь сказать мне, как это сделать?

Вместо .click(function () {}) используйте .live('click', function () {}) или .delegate('click', function () {}) . Аналогично .blur() .

Это необходимо, потому что элементы динамически добавляются в документ и к ним не добавлен прослушиватель событий.

Рабочая редакция здесь — обратите внимание (как сказал Пепкин) на live , также я переместил удаление области ввода текста.

http://jsfiddle.net/TrowthePlow/Yp6Yj/1/

 $(document).ready(function () {
    $('.l').live('click', function () {
        $(this).replaceWith('<input type="text" id="ltb" class="'   $(this).attr('id')   '" value="'   $(this).text()   '" />');        
        $('#ltb').focus().select();
    });

    $('#ltb').live('blur', function () {
        $(this).replaceWith('<div id="'   $(this).attr('class')   '" class="l">'   $(this).val()   '</div>');
    });
});
  

http://jsfiddle.net/psw4d/