动态文本框列表
问题描述:
我想使用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才能更改。有人能告诉我如何做到这一点?
答
而不是.click(function() {})
使用.live('click', function() {})
或.delegate('click', function() {})
。类似于.blur()
。
这是必要的,因为元素是动态添加到文档中的,并且没有为它们添加事件侦听器。
答
$(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>');
});
});
我们可以得到内容的小样本页面?此外,为什么要删除文本,为什么不只是设置“display:none”? – 2011-05-27 17:21:06