如何遍历DOM中动态添加的元素

Question

我有一个表单，可以根据用户想要提交的项目类型来添加/删除元素（通过AJAX）。 它包括启用了contenteditable="true"属性的div元素，以便用户可以键入div。

将表单提交给服务器时，我需要遍历所有具有contenteditable="true"属性的元素，然后将数据发送出去。 我确实像这样收集数据：

$('form #Publish, form #Delete').on('click', this, function(e) {
      var FormToSubmit = $(this).parents('form'); // form to submit
      var ButtonClicked = $(this); // which button was clicked publish or delete?
      var serialisedFormArrayObject = [];
      serialisedFormArrayObject.push({
        name: $(this).attr('name'),
        value: $(this).val()
      });

      // loop through contenteditable elements
      var $contentEditableItems = $("[contenteditable=true]"); // this doesn't work on dynamically added elements
      $contentEditableItems.each(function(index) { // add data from elements to form data
        serialisedFormArrayObject.push({
          name: $contentEditableItems[index].id, // ID of div
          value: $contentEditableItems[index].innerHTML // html inside of div
        });
      });
    }

当页面在页面上已经具有contenteditable div元素时，上面的代码可以正常工作。 但是，如果它们是动态引入的，似乎不会在var $contentEditableItems = $("[contenteditable=true]");捕获它们var $contentEditableItems = $("[contenteditable=true]"); 代码的一部分。

页面加载后如何获取这些存在的元素？

我通过AJAX将元素添加到服务器，并要求它提供HTML代码。 服务器返回的代码将如下所示：

<div id="Hobbies" contenteditable="true">
 <p>List your hobbies here.</p>
</div>
<div id="Qualifications" contenteditable="true">
 <p>List your qualifications here</p>
</div>

以上内容会动态添加到表单中。 我没有在jQuery中添加/删除属性/属性。

Answer 1

首先，您需要确保动态添加的内容也具有contenteditable='true'因为您只能通过contenteditable使其可编辑。

我认为以下代码将更安全地获取所有可编辑的内容；

var $contentEditableItems = $("div[contenteditable]").filter(function() {
   return $(this).prop('contenteditable');
});

希望这可以帮助。

Answer 2

如果要替换绑定的元素，绑定将消失。 因此，将绑定替换为：

$(document).on('click', '#Publish, #Delete', function(e) {
  let $clickedElem = $(e.target).closest('#Publish, #Delete'),
      $contentEditableItems = $("[contenteditable=true]");

  console.log($contentEditableItems.length);

})

现在，即使您替换了表单内容（包括#Publish和#Delete按钮），您的代码也可以使用。

结论：它们的容器选择器（您绑定的选择器）必须保留在标记中。 如果更换它，则会丢失绑定。 $(document)作为容器选择器可能太笼统了（但可以保证使用）。 可以随意将其更改为更具体的元素，但是请确保它是在页面整个生命周期中都保留在页面中的元素。

Answer 3

向所有可编辑的div添加一个通用类，例如：

<div class="content_editable" contenteditable="true"></div>

然后使用class . 选择器如：

var $contentEditableItems = $('.content_editable');

Answer 4

似乎是区分大小写的代码。 动态添加的代码可能会使用大写字母，而静态代码则不会。

 $(document).ready(function(){ $('#test').append('<div contenteditable="True">test1</div>'); $('#test').append('<div contenteditable="False">test2</div>'); $('#test').append('<div contenteditable="True">test3</div>'); $('#test').append('<div contenteditable="true">test4</div>'); $('#test').append('<div contenteditable="frue">test5</div>'); }); $('#button').on('click', function(){ $('[contenteditable="True"]').each(function(){ console.log($(this).text()); }) }) $('#button2').on('click', function(){ $('[contenteditable="true"]').each(function(){ console.log($(this).text()); }) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="test"> </div> <button id="button">Log True (Capital)</button> <button id="button2">Log true (No capital)</button>