Question

我有一个简单的contenteditable divs列表，我希望用按钮添加新的divs并获取contentediable的值，如下所示：

HTML

<input type="button" id="addItem" value="Add item" />

<div class="itemContainer">
  <div class="item" id="item1" contenteditable="true">
    Item 1
  </div>
  <div class="item" id="item2" contenteditable="true">
    Item 2
  </div>
</div>

的Javascript

$(function() {

  $("#addItem").click(function() {
    $(".itemContainer").append('<div class="item" id="item3" contenteditable="true">Item 3</div>');
  });

  $("[contenteditable]").blur(function() {
        console.log($(this).html());
  });

});

小提琴

JsFiddle

我按下按钮console.log

后问题是contenteditable div没有显示Add Item的值

前两项工作正常。

如果我已将其附加到DOM，我该如何访问contenteditable？

任何帮助表示赞赏！

谢谢！

Answer 1

1。您需要使用jQuery event delegation

2。此外， 需要更正附加的div代码 ，因为它总是将div 与重复的文字粘贴在一起每次Item 3 。

$(".itemContainer").on('blur',"[contenteditable]",function() {
  console.log($(this).html());
});

工作代码段： -

$(function() {

  $("#addItem").click(function() {
    $(".itemContainer").append(`<div class="item" id="item1" contenteditable="true">
    Item `+($('.item').length+1)+`
  </div>`);
  });

   $(".itemContainer").on('blur',"[contenteditable]",function() {
    console.log($(this).html());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="button" id="addItem" value="Add item" />

<div class="itemContainer">
  <div class="item" id="item1" contenteditable="true">
    Item 1
  </div>
  <div class="item" id="item2" contenteditable="true">
    Item 2
  </div>
</div>

Answer 2

您可以使用此脚本。

$(function() {
  $("#addItem").click(function() {
    $(".itemContainer").append('<div class="item" id="item3" contenteditable="true">Item 3</div>');
  });

  $(document).on("blur",".itemContainer [contenteditable]",function() {
        alert($(this).html());
  });

});

当您动态更新DOM时，您需要将事件绑定到新更新的元素。可以使用$(document).on函数完成。

Fiddle

追加

2 个答案: