置換した HTMLから jQueryの起動（モーダル表示）を実行することはできないのでしょうか？

Question

置換した HTMLから jQueryの起動（モーダル表示）を実行することはできないのでしょうか？

下記のように「編集」ボタンを設置し、「編集」ボタンをクリックすると編集のモーダル画面が表示されるようにしています。

    <tbody id="replaceTbody">
        <td>
          <button class="js-modal-open" type="submit" data-target="modal01">編集</button>
        </td>
    </tbody>

モーダルの処理は下記を参考に作成しています。
https://webdesignday.jp/inspiration/pickup/4680/

「class」が「js-modal-open」であるボタンをクリックすると、モーダルが表示されます。
ここまでは特に問題は発生していません。

上記の「tbody」のタグの箇所は一覧ページで検索結果を表示する箇所でもあるため、検索処理を作成し、検索結果を「replaceWith」で置換する処理を作成しました。
その処理が下記になります。

<script>
  $(function() {
    const token = $("meta[name='csrfToken']").attr('content');
    $(document).on("click", "[name='search']", function (e) {
      e.preventDefault();
      const data = {
        name: $('input[name="name"]').val(),
      };
      $.ajax({
        url: "/users/search",
        type: "POST",
        data: data,
        beforeSend: function (xhr, settings) {
          xhr.setRequestHeader("X-CSRF-Token", token);
        },
        success: function (data, textStatus, xhr) {
          $("#replaceTbody").replaceWith(data.result);
        },
        error: function (xhr, textStatus, settings) {

        },
        complete: function (xhr, textStatus) {
        }
      });
    });
  });
</script>

URLの「/users/search」は PHPのプログラムで、検索を実行し、検索結果を「tbody」のタグごと置換できる形式に編集した HTMLを戻す処理にしています。

Firefoxの開発ツールで確認したところ、ボタンの HTMLは置換前と同じ下記のようになっていることを確認しました。

<button class="js-modal-open" type="submit" data-target="modal01">編集</button>

しかし、「編集」ボタンをクリックしてもモーダルが表示されません。

これは、そもそも置換した HTMLではモーダルは起動しない（jQueryは起動しない）ものであるためこの方法は NGなのでしょうか？
もしくは、なにか私のプログラムにミスがあるものなのでしょうか？

ちなみに、

$("#replaceTbody").replaceWith(data.result);

の部分を下記のように直接的な HTMLのソースを記述して試してみたりもしました。

$("#replaceTbody").replaceWith('<button class="js-modal-open" type="submit" data-target="modal01">編集</button>');

コメントに連絡をいただきましたモーダルを表示するスクリプトについて追記させていただきます。
スクリプトは下記にになります。

    $(function () {
      $('.js-modal-open').each(function () {
        $(this).on('click', function () {
          var target = $(this).data('target');
          var modal = document.getElementById(target);
          $(modal).fadeIn();
          return false;
        });
      });
      $('.js-modal-close').on('click', function () {
        $('.js-modal').fadeOut();
        return false;
      });
    });

Comments

[Daregada]

> 「class」が「js-modal-open」であるボタンをクリックすると、モーダルが表示されます。

に相当する処理(当然、ありますよね?)を、質問文中に追加してください。

[m.ts10806]

モーダル起動のコードをご提示ください。
参考先はあくまで参考であり、ご自身のコードではありません。

[takujiji]

コメントありがとうございます。
モーダルを表示する箇所のスクリプトを追記させていただきました。

Answer 1

追記依頼で複数の方が書かれている通り実際のイベント処理を確認した方が確実なのですが、おそらく

$('.js-modal-open').on('click', function() {
 :

というように記述されているのではないかと思います。この書き方ですと、動的生成された要素にはイベント設定されません。

$(document).on('click', '.js-modal-open', function() {
 :

とすれば動的生成された要素にもイベントが適用されます。

Comments

[miyabi_pudding]

横槍すみません。
$(document).on('click', '.js-modal-open'
これは、クリックイベント自体はドキュメントに適用され、
セレクターの要素がクリックされた時にコールバック起動となるのでしょうか？？

[takujiji]

コメントありがとうございます。
ご連絡をいただいたとおり、「$(document).on・・・」という記述方法に変えると無事に動作いたしました。
ありがとうございます。

「$(document).on・・・」を記述することで、置換した要素も含めて、もとからあるページ全体の要素を対象にすることができるために動作するようになった、という理解であってますか？

[saoyagi2]

後者の書き方ではドキュメント全体に対してイベントハンドラが設定され、イベントハンドラ中で第2引数のセレクタに合致した際にのみ実際の処理が行われます。

[takujiji]

追加のコメント、ありがとうございます。
多くの方にコメントをいただきまして、自身が書いていたソースコードの内容の理解が深まりました。
どのコメントも非常に参考になりましたが、具体的な対応方法を記載いただいたこちらの回答をベストアンサーとさせていただきます。
ありがとうございました。

Answer 2

大変失礼しました。

誤認識があったようです。
（第二引数にセレクターを記載する方法ではできない云々の部分です）

saoyagi2さんの回答が有力解法になるかと思います。
下方に記載の、動的要素に改めてイベント付与を、する手法は、
解法の一つではありますので、ご参考になれば幸いです。

------ 以下元回答 ------

置換した要素（動的に作成した要素）にはイベントが当たらないので、改めてイベントを付与する必要があるからです。

でも、親に対してクリックイベントつけてるよ？とお思いかもしれませんが、
質問者さんの構文では、親にクリックイベントは当たらず、結果的には子要素にクリックイベントが当たっています。

【jQuery】onメソッドの使用方法 - Qiita

ではどうするかというと、
親にのみクリックイベントを当て、
その時、クリックされた子要素を特定するか、
イベント自体の関数を別に用意し、
動的に子要素を作成した際に、改めて子要素自体にイベントを付与する構文にするか、
のどちらかになるでしょう。

Comments

[takujiji]

ソースを追記する前であったにもかかわらずコメントをいただきましてありがとうございました。
jQueryはまだ日が浅く、自身で書いたコードの違いについてもよく分かっていませんでしたが、今回多くの方からコメントをいただいたことで、自身が書いていた処理の内容についての理解が深まりました。
改めて、ありがとうございました。

[miyabi_pudding]

情報やソースコードはなるたけ全部記載するようにしましょう。
回答者も人間なので、
質問の状況を鵜呑みにしてしまい、回答してしまうこともありますので。
誤回答は私の自業自得なので、申し訳ない限りです。

[takujiji]

コメントありがとうございます。
モーダルの処理はほぼサンプルのとおりに書いていたため、書かなくても問題ないかと勝手な判断をしてしまっていましたが、自分勝手な判断は良くないと改めて思わされました。
今後は、ご指摘の通り、省略せずに記載させていただこうと思います。

Answer 3

エスパー回答。
自身で書かれた
$(document).on("click", "[name='search']", function (e) {

この書き方で拾えるイベントの影響範囲が分かれば対応できます。

Comments

[takujiji]

ソースを追記する前であったにもかかわらずコメントをいただきましてありがとうございました。
jQueryはまだ日が浅く、自身で書いたコードの違いについてもよく分かっていませんでしたが、今回多くの方からコメントをいただいたことで、自身が書いていた処理の内容についての理解が深まりました。
改めて、ありがとうございました。

[m.ts10806]

「動的」「静的」で要素の状態を把握できれば理解はもっと深まると思いますし、有効活用できると思います。

[m.ts10806]

あと、jQueryとJavaScriptの記法が混ざってるのはメンテナンス性もか可読性もよろしくないです。
特に要素を取得する処理。。
var modal = document.getElementById(target);
↑ここ。
jQueryを使うメリットは簡潔にかけることなので、そこは活かしましょう。

[takujiji]

コメントありがとうございます。
ご指摘の、jQueryと JavaScriptの記法の違いについては全く意識していませんでした。
改めて jQueryの仕組みを、記法とともに理解し直してみようと思います。

[m.ts10806]

コピペで動いたと満足しないことだと思います（たぶん今回はそれが原因）

[takujiji]

そうですね。
コピペで動かないと挫折してしまうときもありますけども、動いてしまうと理解が広がらないときがありますからね。
ありがとうございます。

[m.ts10806]

「意図を説明コードは使わない」くらいでちょうどよいと思います。

Answer 4

追記・修正依頼にもある通り、js-modal-openにクリックイベントを追加する記載がないため何とも言えませんが、参考先ベースで下記のようなコードを記載している認識ですよね？

$(function(){
    $('.js-modal-open').on('click',function(){
        $('.js-modal').fadeIn();
        return false;
    });
    $('.js-modal-close').on('click',function(){
        $('.js-modal').fadeOut();
        return false;
    });
});

この記載は、あくまでコードが実行された段階で存在しているjs-modal-openに対してクリックイベントを追加しているため、後から置換されて追加されたjs-modal-openには適用されません。

そのため、置換処理の後で同様にクリックイベント追加を行う必要があります。

Comments

[takujiji]

ソースを追記する前であったにもかかわらずコメントをいただきましてありがとうございました。
jQueryはまだ日が浅く、見様見真似で動かしていましたが、今回多くの方からコメントをいただいたことで、自身が書いていた処理の内容についての理解が深まりました。
改めて、ありがとうございました。