Question

我正在尝试创建大量可编辑的div文本。我可以编辑，但只有第一个div。

$(function() {
        $(".add-new").click(function() {
            $('.image').append("<div id='new-text'></div>")
        });
        $('#writable').keydown(function() {
            var writable_value = $('#writable').val();
            $('#new-text').html(writable_value)
        });
    }
)

我的表格

<form>
        <input type="text" id="writable">
        <buton type="button" class="btn btn-primary add-new">add new text</buton>
</form>

如果我点击选中的div我可以编辑它

Answer 1

<强> DEMO

以下是您可以做的事情：

每次添加动态id，然后更改editable以一些常见值开头的所有id div的值：

$(function() {
        var count=0;//global variable to add unique id div
        $(".add-new").click(function() {
            $('.image').append("<div id='new-text_"+count+"' contenteditable>Edit me</div>")
            //divs will be new-text_1,new-text_2 etc.,
            count++;
        });
        $('#writable').keydown(function() {
            var writable_value = $('#writable').val();
            $("div[id^=new-text]").text(writable_value);
            //The above selector changes values of all div whose id starts with new-text
        });
    }
)

<强>更新

重点是添加更多div以及编辑和替换文字。你只需要改变下面的行

$("div[id^=new-text]").text(writable_value);

到

$("div[id^=new-text]:last").text(writable_value);
//Always target the last added textbox

<强> UPDATED DEMO

添加很多可编辑的div

1 个答案: