jQuery blur在被调用2/3次后调用了2/3次

我有一些jQuery代码，当你点击文本时，它会变成一个输入，当它模糊（失去焦点）时，它会变回文本，反之亦然，但是在第三次调用时，它完全中断了，我不知道为什么

有人知道吗

代码在

抄袭

$（文档）.ready（函数（）{
函数editfield（）{//处理到文本框的交换
var元素=$（此）；
警报（element.text（））；
css（'cursor'，'auto'）；
css（'display'，'inline block'）；
html（“”）；
元素。子元素（'input'）.focus（）；
$（元素）。委托（“输入”，“焦点”，函数（）{
$（元素）。委托（“输入”，“模糊”，函数（）{
html（element.children（'input:text'）.val（））；
css（'cursor'，'pointer'）；
元素1（“单击”，编辑字段）；
});
});
}
////////////////////////////////
$（“.field”）.css（'cursor'，'pointer'）；
$（“.field”）.one（“单击”，编辑字段）；
});​

每次调用

focus

处理程序时，您都在分配另一个冗余的

.delegate（）

处理程序

从处理程序内部删除

blur

委托

      // element is already a jQuery object, so no need to wrap it with $()
   element.delegate("input", "focus", function() {
        // do whatever on focus
    })
     .delegate("input", "blur", function() {
            element.html(element.children('input:text').val());
            element.css('cursor', 'pointer');
            element.one("click", editfield);
    });

另外，我很清楚为什么要等到单击后才分配处理程序

您可以立即分配它们。我不确定这里的确切情况

如果每次单击都试图将文本替换为

，那么我只需将

.delegate（）

放置在

.field

上一次，单击放置文本字段，然后用模糊替换文本值

大概是这样的：

您的示例已更新：

HTML

文本字段1

每次调用

focus

处理程序时，您都在分配另一个冗余的

.delegate（）

处理程序

从处理程序内部删除

blur

委托

      // element is already a jQuery object, so no need to wrap it with $()
   element.delegate("input", "focus", function() {
        // do whatever on focus
    })
     .delegate("input", "blur", function() {
            element.html(element.children('input:text').val());
            element.css('cursor', 'pointer');
            element.one("click", editfield);
    });

另外，我很清楚为什么要等到单击后才分配处理程序

您可以立即分配它们。我不确定这里的确切情况

如果每次单击都试图将文本替换为

，那么我只需将

.delegate（）

放置在

.field

上一次，单击放置文本字段，然后用模糊替换文本值

大概是这样的：

您的示例已更新：

HTML

文本字段1

如果您多次单击输入，您的第二种方法会清除文本，我正在修复：-P但非常感谢您的帮助@佩兹-是的o） 我会将文本放在它自己的范围内，而不是创建/销毁元素，只是显示和隐藏它们。这里有一个例子：如果你点击一个输入不止一次，你的第二个方法会擦除文本，我正在修复：-P但是非常感谢你的帮助@佩兹-是的o） 我会将文本放在它自己的范围内，而不是创建/销毁元素，只是显示和隐藏它们。下面是一个例子：

$(document).ready(function() {
    $(".field").css('cursor', 'pointer')

     .click(function() {
        var element = $(this);
          // Consolidated the 2 .css() calls into one by passing an object literal
        element.css({cursor:'auto', display: 'inline-block'});
        element.html('<input type="text" size="25" value="' + element.text() + '" style="width:' + element.width() + 'px;height:' + element.height() + 'px;border:none;padding:0px;margin:0px;">');
        element.children('input').focus();

    })
     .delegate("input", "blur", function() {
        $(this).parent().html(this.value).css('cursor', 'pointer');
    });
});​

$(document).ready(function() {
    $(".field").delegate('span', 'click', function() {
        var $th = $(this).hide().css('size', "25");
       $th.siblings('input')
           .val($th.text()).show().focus();

    }).delegate("input", "blur", function() {
        $(this).hide()
            .siblings('span')
            .html(this.value).show();
    });
});​

<div id="thingy" class="field">
    <span>Text field one</span>
    <input type='text' />
</div><br />