【WP】シングルページをlightcase.jsで表示させたいが、発火しない

Question

前提・実現したいこと

WordPressのテーマ構築で、
archiveページ上で、singleページをモーダル表示しています。
post per pageは6で、7記事目以降はページングせず、
スクロール量を見てappendで動的に追加しています。

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

ページ訪問後、1度目のクリックで2回クリックしないとlightcaseが発火しません。
2度目以降だと、一度のクリックで発火します。
2度目以降でも、何かの拍子で発火しないことがあります。

★エラーメッセージ
表示されず（困っています）

該当のソースコード

<div class="live_article__list js-infinitiescroll">
    <?php if (have_posts()): ?>
    <?php while (have_posts()) : the_post(); ?>

      <!--article 部分が動的にappendされていく-->
      <article class="live_article">      
          <a href="<?php the_permalink();?>" data-rel="lightcase">
             <!--サムネイルなど…今回は省略-->
          </a>                
      </article>

    <?php endwhile; ?>
    <?php endif; ?>
</div>

lightcase(){
 
        //動的に追加した要素にも発火させるために$(document)から指定
        $(document).on('click','a[data-rel^=lightcase]',function(e){
            e.preventDefault();　//aタグの遷移をキャンセル
            $(this).lightcase(); //1度目のクリックでは絶対に発火しない
            console.log('押したよ'); //これは毎回必ず実行される
        });
        
    }

試したこと

・preventDefaultの代わりにreturn false =>結果変わらず
・touchイベントなどを使ってみる => 関係なかった
・親要素から指定してみる => aタグ遷移してしまってダメ

$(document).on('click','article',function(e){
  e.preventDefault();
  $(this).find('a[data-rel^=lightcase]').lightcase();
});

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

★使用ライブラリ
モーダル：lightcase.js
http://cornel.bopp-art.com/lightcase/

Comments

[退会済みユーザー]

不具合が生じるページを公開することは可能ですか？

[enkbutter]

https://phai.xyz/live/
こちらのページです。
liveページの他に、Discographyでも同じ仕組みを使っています。

Answer 1

公式と同じ書き方にしてもうまく動作しませんか？
Lightcase.js
Documentation

Comments

[enkbutter]

回答ありがとうございます。
公式と同じ書き方とはこちらのことでしょうか？
```
$('a[data-rel^=lightcase]').lightcase();
```
通常ならこれで問題ないのですが、
動的に追加した要素に対して発火させたいので、
親要素からの指定は必須かと思っており、その部分で詰まっています…

[退会済みユーザー]

document.on.clickが気になりました。公式だとdocument.readyなので。

[退会済みユーザー]

on.click：クリックされてから初めてlightcaseの準備が整う
document.ready: HTMLが全て読み込まれたらlightcaseの準備が整う

準備が整ったあとで画像をクリックするとモーダルが発動する
と解釈しております。

[enkbutter]

どうもありがとうございます！解決しました！

最初の読み込みの他に、
動的にappendする度に、もう一度lightcaseを呼ぶことにしました。
部分的でわかりづらいかと思いますが一応載せておきます。

```
// コンテンツ要素を追加
$(IScontent).append(contentItems);

//////////////////////////追加
$(IScontent).ready(function(){
that.lightcase();
});
//////////////////////////追加
```

onとreadyの違いがよくわかっていなかったのが原因でした。
ありがとうございます！