更改元素p与输入文本字段问题jquery

Question

我面临一个小问题，同时发射jquery事件来替换元素p或span文本字段和onblur事件替换回p或span字段。

演示是在这里http://jsfiddle.net/yXcZG/

它非常适合第一次，而页上的文字点击，但是当你重复同样的过程第二次失败。

任何一个可以帮助我在哪里应该是问题

Answer 1

jQueries .on selecor用于连接到动态内容，如Ajax和你正在做什么。通常情况下，您只会使用$('.myClass').click(funcction(){});，但使用像您这样做的静态类$('.cmtedit').on(...有问题，因为一旦您单击该类并将其删除，它就不再与您创建的参考一同存在。因此，要正确使用.on，您需要将其附加到document，以便它始终可以附加到任何动态内容！ :-)

。对（事件[，选择器] [，数据]，处理程序（eventObject）传递）

$(document).on('click', '.cmtedit', function (e) { 
    console.log(this); 
    TBox(this); 
}); 

行之有效这里..

http://jsfiddle.net/yXcZG/3/

如果您不是使用Chrome或Firefox，请记得删除console.log();。它完全不支持IE！

Answer 2

我觉得你是在RBox功能在TBox功能做

$(obj).remove(); 

，以便消除obj的，当你创建它，你必须添加点击事件处理程序

或甚至更好

我建议你使用

$(".cmtedit").live('click', function (e) { 

，而不是

$(".cmtedit").on('click', function (e) { 

参考http://api.jquery.com/live/

Answer 3

您未将单击事件附加到在RBox（）函数中创建的新的<p>。下面的代码工作：（测试是否出在这里：http://jsfiddle.net/yXcZG/5/）

$(".cmtedit").on('click', function (e) { 
    TBox(this); 
}); 

$("input").live('blur', function (e) { 
    RBox(this); 
}); 
function TBox(obj) { 
     var id = $(obj).attr("id"); 

     var tid = id.replace("cmt_edit_", "cmt_tedit_"); 
     var input = $('<input />', { 'type': 'text', 'name': 'n' + tid, 'id': tid, 'class': 'text_box', 'value': $(obj).html() }); 
     $(obj).parent().append(input); 
     $(obj).remove(); 
     input.focus(); 
} 
function RBox(obj) { 
    var id = $(obj).attr("id"); 

    var tid = id.replace("cmt_tedit_", "cmt_edit_"); 
    var input = $('<p />', { 'id': tid, 'class': 'cmtedit', 'html': $(obj).val() }); 
    $(obj).parent().append(input); 
    $(obj).remove(); 

    $(".cmtedit").on('click', function (e) { 
    TBox(this); 
    }); 
}​ 

Answer 4

如果我是你，虽然我会重构它（活是昂贵的），并把它写这样的：

<style> 
    ​#cmt_edit_323 input { display: none; }​ 
</style> 

<div id="sample"> 
    <p id="cmt_edit_323" class="cmtedit"><span>Sample Text</span><input type="text"></input> </p> 
</div>​​​​​ 

<script> 
$(".cmtedit").on('click', function (e) { 
    TBox(this); 
}); 

$(".cmtedit input").on('blur', function (e) { 
    RBox(this); 
}); 

function TBox(obj) { 
     var input = $(obj).find("input"); 
     var span = $(obj).find("span"); 
     input.attr('value', span.text()).show().focus(); 
     span.hide();    

} 
function RBox(obj) { 
     var input = $(obj); 
     var span = $(obj).parent().find("span"); 
     span.html(input.attr('value')).show(); 
     input.hide(); 
}​ 
</script> 

检查在这里：JSFiddle

Answer 5

我无法发表评论，所以我不得不作出回答。

@ ppumkin的答案只是一个小问题 - 如果您单击浏览器或切换选项卡，父项中添加了两个元素。

我试图检查许多其他事件来解决这个问题，但没有运气。 所以对我来说，最简单的方法是做一个简单的检查元素之前追加在RBox()功能：

if ($("#" + tid).length == 0) { 
    $(obj).parent().append(input); 
} 

除了这个我用.on()方法为blur为.live()已被弃用，不再推荐。