代码之家 › 专栏 › 技术社区 › volume one

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

jquery javascript

volume one · 技术社区 · 6 年前

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

当将表单提交到服务器时,我需要遍历所有具有该属性的元素 contenteditable=“真” 把数据传过去。我收集的数据是这样的:

$('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]"); 部分代码。

如何在页面加载后获得这些元素?

我通过AJAX添加元素,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中添加/删除属性。

4 回复 | 直到 6 年前

tao 6 年前

如果要替换绑定到的元素,则绑定将消失。因此,请将绑定替换为:

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

  console.log($contentEditableItems.length);

})

现在,即使您替换了表单内容(包括 #Publish 和 #Delete 按钮)。

总之:它们容器选择器(您绑定的那个)必须留在标记中。如果你换了它,你就失去了约束力。 $(document) 作为容器选择器可能过于通用(但它可以保证工作)。请随意将其更改为更具体的内容,但请确保它是页面整个生命周期中保留在页面中的元素。

Onur Topal 6 年前

首先,您需要确保动态添加的内容还具有 contenteditable='true' 因为只有通过 contenteditable

我认为下面的代码将更安全,以获得所有可编辑的内容;

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

希望这有帮助。

-1

Zakaria Acharki 6 年前

向所有可编辑div添加一个公共类,如:

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

然后使用类 . 选择器类型:

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

-2

Mark Baijens 6 年前

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

$(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>