Question

我试图弄清楚如何在我构建的网络应用中将span标记转换为输入框，反之亦然。我可以将span标记转换为输入框并返回但由于某种原因，如果再次单击span标记，它不会将其转换为输入框。我只能假设这是因为jQuery中处理程序的绑定和解除绑定，但我无法找到处理此功能的最佳方法。有什么想法吗？

$('[content-editable]').click(function(){

    var edit_box = $(this);

    $(edit_box).html('<input type="text" content-editing value="' + $(edit_box).html() + '">');

    $(edit_box).find('input').select();

    setTimeout(function(){

        $('body').on('click', function(){

            $(edit_box).html($(edit_box).find('input').val());

        });

    }, 500);

});

PS。添加超时是为了在单击后立即停止输入框成为span标记。

我的JS小提琴：http://jsfiddle.net/AaxT9 - 出于某种原因，在JS Fiddle中，单击主体后它不会将其转换回span标签，但它会在我的网络应用程序中进行。

Answer 1

您的尝试有多个问题：

您将处理程序放在错误的位置。将其保留在另一个单击处理程序中将多次分配处理程序并递增调用处理程序。
您可能需要点击其他位置将其转换回span。所以请使用document点击绑定。
此外，请将代码保留在$(document).ready()函数中以确保已加载DOM。

这样做：

$(document).ready(function() {
    var edit_box = $('[content-editable]');
    $(document).on("click",function() {
        console.log($(event.target));
        if($(event.target).is("[content-editable]")) {
            $(edit_box).html('<input type="text" value="' + $(edit_box).html() + '">');
            $(edit_box).find('input').select();
        }
        else if(!$(event.target).is("input")){
            $(edit_box).html($(edit_box).find('input').val());   
        }
    });
});

<强> DEMO

我document点击了我的部分，但是如果您想使用body点击处理程序，那么您可以使用它，但这会将input仅转换回span body次点击。

Answer 2

不是设置超时而是移动代码以在附加输入的span函数内更改回onblur。

<强>代码

$('[content-editable]').click(function () {
    var edit_box = $(this);
    $(edit_box).html('<input type="text" value="' + $(edit_box).html() + '">');
    $(edit_box).find('input').select().on('blur', function () {
        $(edit_box).html($(edit_box).find('input').val());
    });
});

修改

$('[content-editable]').click(function () { var edit_box = $(this); $(edit_box).html('<input type="text" value="' + $(edit_box).html() + '">'); $(edit_box).find('input').select().one('blur', function () { $(edit_box).html($(edit_box).find('input').val()); }); });

Fiddle

从span标签转换为输入框，反之亦然

2 个答案: