jQuery 元素在 dblclick/blur 上跳跃

Question

我编写了以下代码:

http://jsfiddle.net/3Zxx9/

HTML:

<div class="question">
    <div class="questionLabel">
        <span class="questionTitle">How old are you?</span>
        <span class="hideCollapseQuestion">x</span>
    </div>
    <div class="questionChoices">
        <div class="questionChoice">
            <div class="questionLetter">A</div>
            <div class="questionText">Over 3</div>
        </div>
        <div class="questionChoice">
            <div class="questionLetter">A</div>
            <div class="questionText">Under 69</div>
        </div>
    </div>
</div>
<div class="question">
    <div class="questionLabel">
        <span class="questionTitle">Wat is your name?</span>
        <span class="hideCollapseQuestion">x</span>
    </div>
    <div class="questionChoices">
        <div class="questionChoice">
            <div class="questionLetter">A</div>
            <div class="questionText">Ahmed</div>
        </div>
        <div class="questionChoice">
            <div class="questionLetter">A</div>
            <div class="questionText">John</div>
        </div>
    </div>
</div>​

CSS:

.question {
    background: #ccc;
    width: 100%;
    display: block;
}

.questionTitle {
    font-size: 20px;
    padding: 2px;
}

.questionChoices {
    padding-left: 20px;
}

.questionChoice {
    display: table;
    padding: 2px;
}

.questionChoice > div {
    display: table-cell;
}

.questionLetter {
    font-size: 18px;
    font-weight: bold;
    color: white;
    padding: 5px;
    background: #1b5e30;
    -webkit-border-radius: 8px;
    border-radius: 8px;
}

.questionText {
    padding-left: 10px;
}

.hideCollapseQuestion {
    float: right;
}​

JS:

$(".hideCollapseQuestion").each(function()
{
    $span = $(this);
    $(this).click(function()
    {
        var $questionChoices = $(this).parent().parent().children(".questionChoices");

        if ($questionChoices.css("display") === "none")
            $questionChoices.fadeIn();
        else
            $questionChoices.fadeOut();
    });
});

$(".questionTitle").each(function()
{
    $(this).dblclick(function()
    {
        onQuestionTitleChange($(this));
    });
});

function onQuestionTitleChange($title)
{
    $currentTitle = $title.text();
    $newInputField = $('<input type="text" value="' + $currentTitle + '" />');
    $title.replaceWith($newInputField);
    $newInputField.focus();

    $newInputField.blur(function()
    {
        $oldSpan = $('<span class="questionTitle">' + $newInputField.val() + '</span>');
        $newInputField.replaceWith($oldSpan);

        $oldSpan.dblclick(function()
        {
            onQuestionTitleChange($oldSpan);    
        });
    });
}​

我的目标是双击即可编辑问题标题。一开始一切都很好，但是例如。如果您编辑第一个问题，然后编辑第二个问题，如果您想再次编辑第一个问题，它将用输入替换第二个范围[而不是预期的第一个范围]。

请注意，我不想为此使用现成的插件。

Answer 1

您只需在最后几行执行以下操作:

替换

$oldSpan.dblclick(function()
        {
            onQuestionTitleChange($oldSpan);    
        });

与

$oldSpan.dblclick(function()
                        {
                            onQuestionTitleChange($(this));    
                        });

看一下工作示例: http://jsfiddle.net/saidbakr/3Zxx9/4/