Question

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

有人有任何想法吗？

复制

$(document).ready(function() {
    function editfield() { //Handles swapping to textbox
        var element = $(this);
        alert(element.text());
        element.css('cursor', 'auto');
        element.css('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();
        $(element).delegate("input", "focus", function() {
            $(element).delegate("input", "blur", function() {
                element.html(element.children('input:text').val());
                element.css('cursor', 'pointer');
                element.one("click", editfield);
            });
        });

    }

    ////////////////////////////////
    $(".field").css('cursor', 'pointer');
    $(".field").one("click", editfield);
});

Answer 1

每次调用.delegate()处理程序时，您都要分配另一个冗余focus处理程序。

从处理程序中删除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);
    });

另外，我要注意你为什么要等到你点击之后再分配处理程序。

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

如果您尝试在每次点击时交换<input>的文字，那么我只需将.delegate()放在.field上，只需点击一下即可放置文字字段，并用模糊的方法将其替换为文本的值。

这样的事情：

您的示例已更新： http://jsfiddle.net/x2fQP/8/

$(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');
    });
});

另外，我建议同时显示文本（在一个范围内）和<input>，然后切换它们以显示/隐藏正确的文本。

这样会更有效，并且无需继续更改.css()属性。

编辑：

最终，您最好开始使用自己<span>中的文字作为<input>的兄弟。您只需在代理<span>和<input>上显示/隐藏click和blur。

喜欢这样： http://jsfiddle.net/x2fQP/14/

$(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();
    });
});

HTML

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

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

1 个答案: