Question

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

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

接下来您要做的是将函数绑定到#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

使用keyup（）问题更改动态创建的标签文本

HTML

的JavaScript / jQuery的

1 个答案: