Question

我正在尝试使用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来更改值，焦点并被删除。删除#ltb后我需要更改.l有人能告诉我怎么做吗？

Answer 1

而不是.click(function () {})使用.live('click', function () {})或.delegate('click', function () {})。类似于.blur()。

这是必要的，因为元素是动态添加到文档中的，并且没有为它们添加事件侦听器。

Answer 2

这里的工作修订 - 通知（如pepkin所说）live，我也删除了输入文本区域。

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

Answer 3

$(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/

动态文本框列表

3 个答案: