将元素添加到 HTML 后，jQuery 刷新 DOM答案

【问题标题】：jQuery refresh DOM after adding elements to HTML将元素添加到 HTML 后，jQuery 刷新 DOM
【发布时间】：2018-04-12 21:05:26
【问题描述】：

我确实发现了许多类似的问题，但没有一个可以帮助我解决问题的解决方案。

我正在向我的页面插入 HTML 元素，稍后我想计算它们。因为新创建的元素不是 DOM 的一部分，所以 count 返回 0。

代码：

$('#addSlide').on('click', function(){
    var reader = new FileReader();
    reader.readAsDataURL(inputFile);
    reader.onloadend = function(){
       slideImg = URL.createObjectURL(inputFile);
       // ADDING ELEMENTS
       var slide = '<div class="slide"><img src="'+slideImg +'" /></div>';
       $('#Container').append(slide);
    };
    // EXECUTING SOME FUNCTION
    somename();
});

function somename(){
    var slideCount = '';
    slideCount = $('#Container div').length;
    console.log(slideCount);
    // ALWAYS RETURNS '0' REGARDLESS TO HOW MANY SLIDES ARE ADDED
    if( slideCount > 1 ) {
       // SOME CODE ...
    }
}

如何刷新 DOM 以便可以在代码中使用新创建的元素？

【问题讨论】：

在这种情况下，可能只是您在 FileReader 完成之前调用了 count()。将 somename() 调用移动到 onloadend 块内部（在 .append 行之后），以便在加载完成之前不会调用它。
@Daniel 朋友，即使在 reader.onloadend 中调用了 somename() ？那我还应该在哪里称呼它呢？
@Daniel 你是对的，我在reader.onloadend 中添加了somename()，它现在可以工作了。请作为答案发布，以便我标记它。
很容易让一行出现乱序，并且很难在您自己的代码中发现！答案已发布，谢谢！

标签： jquery dom

【解决方案1】：

对于您更新的代码，您只是在错误的地方调用了 count 函数。

$('#addSlide').on('click', function(){
    var reader = new FileReader();
    reader.readAsDataURL(inputFile);
    reader.onloadend = function(){
       slideImg = URL.createObjectURL(inputFile);
       // ADDING ELEMENTS
       var slide = '<div class="slide"><img src="'+slideImg +'" /></div>';
       $('#Container').append(slide);
       // CALL IT HERE 
       somename()
    };
    // EXECUTING SOME FUNCTION
    // NOT HERE somename();
});

否则，您在异步 FileReader 完成之前调用您的计数函数。

【讨论】：

感谢朋友的帮助。我非常感谢。

【解决方案2】：

它的工作方式与您的工作方式一样，您确定在检查计数之前添加了 div，您拥有的功能应该是前例：

var slide = '<div class="slide">asdfasdf</div>';
$('#Container').append(slide);
$('#Container').append(slide);
somename();
function somename() {

  var slideCount = '';
  slideCount = $('#Container div').length;
  console.log(slideCount);
  // ALWAYS RETURNS '0' REGARDLESS TO HOW MANY SLIDES ARE ADDED

  if (slideCount > 1) {
    // SOME CODE ...
  }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Container"></div>

【讨论】：

我正在通过文件阅读器添加图像，也许这就是原因。我用更多信息更新了我的代码，以便您的朋友可以指导我