クリックで背景適用がされない

Question

前提・実現したいこと

クリックで背景に適用させたく、まとめて指定できないか試したのですが上手くいきませんでした。

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

とくにコンソールはエラーがありませんでした。

該当のソースコード

var elm = $('.wl').find('.lazyloaded');
    $(elm).each(function () {
      var src = $(this).attr('src');
      $(this).on('click', function () {
        document.body.style.backgroundImage='url("'+src+'")';
        document.body.style.backgroundSize='400px 400px';
        document.body.style.color='var(--text)';
        let target=document.querySelectorAll('.short-title');
        for(let i in target){
           if(target.hasOwnProperty(i)){target[i].style.borderBottom='1px solid var(--text)';}
        };
     });
   });

<div class="hoge">
  <img class="lazyloaded" src="xxx.png">
  <img class="lazyloaded" src="xxx.png">
</div>
<div class="wl">
  <div>
    <div>
      <img class="lazyloaded" src="xxx.png">
      <img class="lazyloaded" src="xxx.png">
    </div>
  </div>
</div>

:root {
  --text: #000
}

試したこと

クリックイベントが発火しないことについて調べてみたのですが、動的に追加した要素についてばかりで求めている情報は得られませんでした。

補足情報（FW/ツールのバージョンなど）

Firefox 最新版、Safari 604.1

Comments

[m.ts10806]

直に.lazyloadedにクリックイベント当てるのではだめですか？かなり回りくどいことやってるような気がしますが・・

[m.ts10806]

あと一行にしてると見づらいように思います。
document.body.style.backgroundImage='url("'+src+'")'; document.body.style.backgroundSize='400px 400px'; document.body.style.color='var(--text)'; let target=document.querySelectorAll('.short-title'); for(let i in target){if(target.hasOwnProperty(i)){target[i].style.borderBottom='1px solid var(--text)';}};

↑改行、インデント適切につけてください。

[erp]

同ページにクリックイベントを起こしたくない lazyloaded もあるため、このようにしています。
インデントしました。

[m.ts10806]

$('.wl .lazyloaded')
直下前提なら
$('.wl > .lazyloaded')
とか試してみてください。
each不要です。

[erp]

間に div がいくつか入るので、そのように修正しました。

[m.ts10806]

前者で取れます

[m.ts10806]

それに、jQueryであればeachしなくてもfindに続けてclickいけるはずで
$('.wl').find('.lazyloaded').on(
styleつける際もdocmentから辿るよりセレクタ.css()のほうが適切です

Answer 1

$(function(){
  $('.wl img').on('click',function(){
    $('body').css('background-image','url('+$(this).attr('data-src')+')');
    $('body').css('background-size', $(this).attr('data-size'));
  });
  $('.wl img:not(.white)').on('click',function(){
    $('body').css("color", "var(--text)");
    $('.short-title').css("border-bottom", "1px solid var(--text)");
  });
  $('.wl img.white').on('click',function(){
    $('body').css("color", "#FFF");
    $('.short-title').css("border-bottom", "1px solid #FFF");
  });
});

これで出来ました。 lazyload で読み込んだ画像なので、 data-src を取得することで解決しました。

Answer 2

$(function(){
  $('.wl .lazyloaded').on('click',function(){
    $('body').css('background-Image','url('+$(this).attr('src')+')');
  });
});