別ファイルをloadしたあと、追加した要素を取得したい

Question

JQueryでloadした別のファイルの要素を取得したいと思っています。

index.html

  <div data-readfile="page02.html" class="readfile"></div>
  <div data-readfile="page03.html" class="readfile"></div>

page02.html

<div class="hoge">page02の内容です。</div>

page03.html

<div class="hoge">page03の内容です。</div>

JavaScriptでは、index.htmlでpage02.htmlとpage03のhtmlをjQueryのloadで読み込んでいます。

let loadingEl = new Array($('.readfile').length);

const fuga = () => {
  const elements = document.getElementsByClassName('hoge');
  console.log(elements);
  [...elements].forEach(el => {
    console.log(el)
  })
}

const inc = () => {
  $('.readfile').each(function (e) {
    const filename = $(this).data('readfile');
    const $this = $(this);
    const p = () => new Promise((resolve) => {
      $this.load(filename , function (data, status) {
        if (status === 'success') {
          $this[0].outerHTML = data;
          return
        } else {
          console.log(status)
        }
      })
      return resolve()
    })
    loadingEl[e] = p();
  });
  Promise.all(loadingEl).then(() => {
    fuga()
  })
}

inc();

fugaの

console.log(elements);

では
HTMLCollectionが表示され、
0: div.hoge
1: div.hoge
length: 2
となっているのですが、

ここを

console.log(elements.length);

にすると「０」が表示されます。

その先のforEachにて、hogeの要素を取得しいろいろと処理をしたいと思っているのですが、
このようなことは可能でしょうか。

後から追加した要素を操作する事に関してはいろいろググると.onを使う方法が出てくるのですが、たとえば

  $('body').on('click','.hoge',function(){
    $(this).css('color','red');
  })

とすると、文字が赤くなるのですが、clickではなくloadにすると処理が走りません。
jQueryのバージョンは3.5.1です。

何卒よろしくお願いいたします。

Answer 1

return resolve()の場所が変じゃないですか？
(resolve) =>{}のブロック内のコードは即時実行されますよ。

executor は意味のある戻り値はありません。これは resolutionFunc か rejectionFunc の副作用と通信します。

引数 | Promise - JavaScript | MDN

Comments

[popc]

ご回答ありがとうございます。
おっしゃる通り、return resolve()　の位置が違っていました。
下記の位置に変更することにより、うまく取得することができました。

const p = () => new Promise((resolve) => {
$this.load(filename , function (data, status) {
if (status === 'success') {
$this[0].outerHTML = data;
return resolve()
} else {
console.log(status)
}
})
})

参考サイトもご教示いただき、ありがとうございます。
loadをまたずにresolveが実行されていたのですね。
正直まだいまいちPromiseが理解しきれていない節がありますが、じっくり考えてみます。
ありがとうございました。