添加了很多可編輯div

我想創建大量的可編輯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我可以編輯

來源

2015-09-25 ArturDvorak

，因爲你正在使用'id'新的文本，你可以編輯只有一格，如果需要是動態的，那麼每個新文本div應該有不同的id –

DEMO

這裏是你可以做什麼：

添加動態每次，然後更改所有editable格，其id開始有一些共同的價值的價值：

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

UPDATE

得到增加更多div和編輯，並替換文本你的觀點。你只需要下面一行

改變

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

到

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

UPDATED DEMO

來源

2015-09-25 10:18:03

，而不是讓count完全全局化，你可以將它移動到你的閉包中，它仍然可以工作，這樣就不會搞亂任何使用count var這是一個非常常見的var名稱！）：https： //jsfiddle.net/peteng/nbk6rjtp/1/ – Pete

謝謝你這是我需要的但它有一個錯誤如果我添加多個div和編輯輸入所有div被更改 – ArturDvorak

最初我想到@Pete，但後來我想它不會有太大的區別..看到你的評論後，我覺得是的，它確實有所作爲...謝謝你... –

添加了很多可編輯div

回答

相關問題