Question

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

我正在将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以便在代码中使用新创建的元素？

Answer 1

它的工作方式就是你的方式你确定要在检查计数代码之前添加div，因为它应该是ex：

＆＃13;

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 ...
  }

}

＆＃13;

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

＆＃13;

Answer 2

对于更新的代码，您只是在错误的位置调用计数功能。

$('#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完成之前调用count函数。

在向HTML添加元素后，jQuery刷新DOM

2 个答案: