如何解决动态文本框列表
| 我正在尝试使用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进行更改。有人可以告诉我该怎么做吗?
解决方法
这里是一个可行的修订版本-注意(如pepkin所说的)
live
,我也删除了输入文本区域。
http://jsfiddle.net/TrowthePlow/Yp6Yj/1/
, 代替.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>\');
});
});
http://jsfiddle.net/psw4d/
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。