Question

I’ve made following code:

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);    
        });
    });
}​

My objective is to make question title editable on double click. Everything is ok at the beginning, but eg. if you edit first question, then edit second question and if you want edit first question again, it replaces second span with input [not first one as expected].

Please notice that I don’t want to use ready plugins for that.

Answer 1

Simply you have to do the follwoing on the last lines:

replace

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

with

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

Look at the working example:
http://jsfiddle.net/saidbakr/3Zxx9/4/