javascript - 使用 keyup() 问题更改动态创建的标签的文本

Question

我正在动态创建表单，因此编辑表单元素的属性。当尝试更改标签时，分配自动生成的 id 效果很好，但是当使用生成的 id 更改此标签时，jQuery 中的函数或 keyup() 会不断调用所有先前创建的标签 id(s )。这意味着当我想编辑一个标签时，它最终会编辑每个标签。

HTML

<input type="text" id="change-label"><br><br>
<button id="add-button">add label</button>
<div id="add-label"></div>

JavaScript/jQuery

$('#add-button').click(function(){
    var div = document.createElement('div');
    var textLabel = document.createElement('label');
    var labelNode = document.createTextNode('untitled');
    textLabel.appendChild(labelNode);
    textLabel.id = autoIdClosure();
    $('#change-label').val('untitled');
    div.appendChild(textLabel);
    $('#add-label').append(div);
});
var autoIdClosure = (function(){
    var counter = 0;
    var labelId = "textInputLabel";
    return function(){
        counter += 1;
        var id = labelId + counter;
        editLabelWrapper(id)
        return id;
    }
})();
function editLabelWrapper(id){
    function editLabel(){
        var value = $(this).val();
        $("#"+id).text(value);
    }
    $("#change-label").keyup(editLabel).keyup();
}

我已经找到了使用 onkeyup="$('#'+globaID).text($(this).val());" 的替代方案，但我需要了解什么我做错了，所以我可以从中吸取教训。

<强> JSFiddle

Answer 1

我认为你想太多了......

不使用唯一的 id，而是使用类，这样更容易处理。
所以改变<div id="add-label"></div>至<div class="add-label"></div>

那么你想要做的是，当 #change-label 中给出一个值时你想要它在最后div.add-label 。

所以函数会变成这样:

$("#change-label").on('keyup', function() {
    $('.add-label:last').text( $(this).val() );
});

接下来您要做的是将函数绑定(bind)到 #add-button 。单击后，我们要添加一个新的 div.add-label在最后一张之后。并清空#change-label 。您可以使用此功能来做到这一点:

$('#add-button').on('click', function() {
    $('.add-label:last').after('<div class="add-label"></div>');
    $('#change-label').val('');
});

Updated Fiddle