jQuery Blur вызывает 2/3 раза после вызова 2/3 раза

Question

У меня есть некоторый код jQuery, где вы нажимаете на текст, и он превращается в ввод, а когда он размывается (теряет фокус), он возвращается обратно к тексту и наоборот, однако при третьем вызове он полностью прерывается, и я понятия не имею, почему?

У кого-нибудь есть идеи?

Код в http://jsfiddle.net/Pezmc/x2fQP/4/

Копирование

$(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 />