我有问题。看看下面的代码:
$(function () {
$('span').live('click', function () {
var input = $('<input />', {
'type': 'text',
'name': 'aname',
'value': $(this).html()
});
$(this).parent().append(input);
$(this).remove();
input.focus();
});
$('input').live('blur', function () {
$(this).parent().append($('<span />').html($(this).val()));
$(this).remove();
});
});
和html现在:
<span>Click aici</span>
所以,这显然适用于jquery 1.8.3,包括在内。在1.8.3 .live()被弃用之后,我们需要使用.on()。所以代码变成了:
$(function () {
$('span').on('click', function () {
var input = $('<input />', {
'type': 'text',
'name': 'aname',
'value': $(this).html()
});
$(this).parent().append(input);
$(this).remove();
input.focus();
});
$('input').on('blur', function () {
$(this).parent().append($('<span />').html($(this).val()));
$(this).remove();
});
});
或只是:
$(function () {
$('span').click(function () {
var input = $('<input />', {
'type': 'text',
'name': 'aname',
'value': $(this).html()
});
$(this).parent().append(input);
$(this).remove();
input.focus();
});
$('input').blur(function () {
$(this).parent().append($('<span />').html($(this).val()));
$(this).remove();
});
});
但这只是第一次工作。
在此处查看演示:http://jsfiddle.net/hW3vk/ 所以,任何想法如何做到这一点将不胜感激。
提前谢谢。
答案 0 :(得分:7)
$(function () {
$(document).on('click', 'span', function () {
var input = $('<input />', {
'type': 'text',
'name': 'unique',
'value': $(this).html()
});
$(this).parent().append(input);
$(this).remove();
input.focus();
});
$(document).on('blur', 'input', function () {
$(this).parent().append($('<span />').html($(this).val()));
$(this).remove();
});
});
您需要更改on
参数才能使其正常运行
$('(parent) static selector').on('event', 'dynamic selector', function(){...})
您可以使用父选择器代替$(document)
,以缩小旅行范围
这里还有一个小提琴http://jsfiddle.net/Spokey/hW3vk/5/
答案 1 :(得分:1)
我搜索了这个,找到了我想要的答案。
然后我发现了“contenteditable”属性,它取代了我想要使用jQuery将跨度更改为输入的原因......
我不知道这个问题&amp;答案早于可疑,但如果它确实或可能有其他帮助,所有主流浏览器现在支持它,所以我需要的整个解决方案是:
<span contenteditable="true">Click aici</span>