Question

我在触发jquery事件时遇到小问题，用文本字段替换元素p或span，并将onblur事件替换回p或span字段。

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

第一次点击p文本时效果很好，但第二次重复同一过程时失败。

任何人都可以帮我解决问题

Answer 1

jQueries .on selecor用于附加动态内容，例如ajax和您正在做的事情。通常你会使用$('.myClass').click(funcction(){});但是使用像你已经完成的$('.cmtedit').on(...这样的静态类是有问题的，因为一旦你点击了那个类并且它被删除了..它与你创建的引用不再存在。因此，要正确使用.on，您需要将其附加到document，以便它始终可以重新附加到任何动态内容！： - ）

.on（events [，selector] [，data]，handler（eventObject））

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

在这里运作良好..

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

如果您不使用Chrome或Firefox，请务必删除console.log();。在IE中根本不支持它！

Answer 2

我认为你正在通过

删除obj

 $(obj).remove();

在TBox函数

中

所以在RBox函数再次创建时，你必须添加click事件处理程序

或更好

我建议你使用

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

而不是

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

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

Answer 3

您没有将点击事件附加到新的＆lt; p＆gt;在RBox（）函数中创建。以下代码有效:(如果在此处测试：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);
}

除此之外，我使用了blur {{1}}方法，因为 .on() 已弃用，不再推荐使用。

使用输入文本字段更改元素p发出jquery

5 个答案: