Question

我已经制作了以下代码：

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/

Answer 2

您正在替换已设置dbl-click事件的问题标题。没关系，但更好的方法是正确使用jQuery的'.on'功能：

$(".question").on('dblclick', '.questionTitle', function()
{
    onQuestionTitleChange($(this));
});

然后您不必再进一步重置事件处理程序的 working example

我还建议你只是改变字段的可见性，而不是一遍又一遍地重新创建它们......

jQuery元素在dblclick / blur上跳跃

2 个答案: