Question

我有一个表单，可以根据用户想要提交的项目类型来添加/删除元素（通过AJAX）。它包括启用了div属性的contenteditable="true"元素，以便用户可以键入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]");部分捕获它们。

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

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

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>

然后使用类.选择器，例如：

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>

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

4 个答案: