要素が見つからないのかattrが効かない

Question

jQuery初心者です。

前提・実現したいこと

jQueryにて画像のプレビューを行いたい

発生している問題・エラーメッセージ

attrを使ったがsrc属性が追加されない

<img class="prev" src="xxxxxxxxxxxxxxxxxxxxx">

という出力結果で欲しいのが、

<img class="prev">

となってしまう。

該当のソースコード

<label class="upload-img">
      <div class="upload-img__inner">       
    		  <input class="upload-img__inner__input" accept="image/png,image/jpeg" multiple="multiple" type="file" style="display: none;">
    		  <svg width="24" height="24" fill="#222222" fill-rule="evenodd" viewBox="0 0 24 24" aria-hidden="true" >
    			  <path d="M19.3,5H16.73l-.8-1.61A.7.7,0,0,0,15.3,3H8.7a.7.7,0,0,0-.63.39L7.27,5H4.7A2.7,2.7,0,0,0,2,7.7V18.3A2.7,2.7,0,0,0,4.7,21H19.3A2.7,2.7,0,0,0,22,18.3V7.7A2.7,2.7,0,0,0,19.3,5ZM12,17.3A4.3,4.3,0,1,1,16.3,13,4.31,4.31,0,0,1,12,17.3Z"></path>
    		  </svg>
    		  <p class="">ドラッグアンドドロップ<br>またはクリックしてファイルをアップロード</p>
  	</div>
  </label>

$(document).on('click', '.upload-img', function() {
  $('.upload-img').off('click');
  //alert("click");
  $('.upload-img__inner__input').off('change');
  $('.upload-img__inner__input').on('change', function (e) {
    c = $('.upload-img__inner__input').val().length;
    if(c==0){
      return;
    }
    let list_item = `<li class="horizontal-img-list__item">
                              <img class="prev">
                            </li>`
    
    let reader = new FileReader();
    reader.readAsDataURL(e.target.files[0]);
    reader.onload = function(e){
      //↓ここ　srcが追加されない
      $(list_item).find('.prev').attr('src', e.target.result);
    }
    $('.upload-img').prev().append(list_item);
  })  
});

jsの、この行で要素が特定できていないのかと思うのですが、その確かめ方が分からず。

$(list_item).find('.prev').attr('src', e.target.result);

先輩方教えて下さい。
宜しくお願い致します。

Answer 1

これでどうですか。
単純にjqueryのオブジェクトとして処理されていないだけなんじゃないかなと思います。

$(document).on('click', '.upload-img', function() {
  $('.upload-img').off('click');
  //alert("click");
  $('.upload-img__inner__input').off('change');
  $('.upload-img__inner__input').on('change', function (e) {
    c = $('.upload-img__inner__input').val().length;
    if(c==0){
      return;
    }

    // ここではあくまで文字列として変数に入れている
    let list_item_text = `<li class="horizontal-img-list__item">
                              <img class="prev">
                            </li>`;

    // jqueryのObjectとして変換したものを格納する
    let list_item = $(list_item_text);

    let reader = new FileReader();
    reader.readAsDataURL(e.target.files[0]);
    reader.onload = function(e){
      //↓ここ　srcが追加されない
      $(list_item).find('.prev').attr('src', e.target.result);
    }
    $('.upload-img').prev().append(list_item);
  })  
});

Comments

[pecchan]

有難う御座います。
オブジェクトと文字列って扱い方が異なるんですね！
知りませんでした。勉強になりました。
有難う御座います！