Помогите мне изменить эту функцию JS / Jquery для динамического создания Div

Question

Я загрузил свой код в JSfiddle:

http://jsfiddle.net/TSM_mac/pnQEe/

Я хочу иметь возможность вводить текстовые вводы на странице и нажимать кнопку «Добавить тип Div», и он добавит (создаст) элемент div внутри элемента div, на который вы нажали (который имеет класс = "редактируемый").

Мне трудно заставить этот код работать. Кто-нибудь может найти, где я пошёл наперекосяк?

Код

var $currentInput = null;

$("#add_div1, #add_div2, #add_div3").click(function() {
    $currentInput = null;
    if ($currentInput == null) {
        $currentInput = $(this).prev();
        $("label").html($currentInput.attr("id"));
    }
});


var editid;
$("div.editable").click(function(e) {
    e.stopPropagation();
    if ($currentInput == null) return;
    editid = $(this).attr("id");
    var adddiv = GetElements();
    $(this).append(adddiv);
    $("label").html("");
});

function GetElements() {
    if ($currentInput == null) return null;

    var value = $currentInput.val();

    if ($currentInput.attr("id") == "add_div1") return {
        "<div>"+value+"</div>"
    }
    if ($currentInput.attr("id") == "add_div2") return {
        "<div>"+value+"</div>"
    }
    if ($currentInput.attr("id") == "add_div3") return {
        "<div>"+value+"</div>"
    }
}

-

<input type="text" id="add-div1" value="Content of Div 1" />
<div id="add_div1">Add Div Type 1</div>
<input type="text" id="add-div1" value="Content of Div 2" />
<div id="add_div2">Add Div Type 2</div>
<input type="text" id="add-div1" value="Content of Div 3" />
<div id="add_div3">Add Div Type 3</div>



<div id="2" class="defaultclass editable">
    Add a Div Here
</div>
<div id="3" class="defaultclass editable">
     Add a Div Here
</div>
<div id="4" class="defaultclass editable">
    Add a Div Here
</div>

<label></label>

-

input { display: block; padding-top: 10px; }
#add_div1, #add_div2, #add_div3 { background: #c0c0c0; border: solid 1px #777; display: inline-block; }

.editable { border: solid 5px green; margin: 20px; background: blue; color: #fff; }

С уважением,

Тэйлор

Answer 1

это работает сейчас

http://jsfiddle.net/pnQEe/5/

(я добавил немного console.log, но теперь закомментировано)

похоже, ваш код состоит в том, что вам нужно нажать на кнопку, а затем нажать div

Проблема № 1: у вас есть return { ... } Это должно быть { return ... } или просто return ...

Проблема №2: у вас add-div1, но код проверен на add_div1 (подчеркивание, а не дефис)

Также я стараюсь не использовать два элемента с одинаковыми или похожими именами. (например, add-div1 для ввода текста и add_div1 для кнопки - выглядит слишком похоже.