Ajax通信後に要素のイベントが発火しなかった時の備忘録

はじめに

Ajax通信後に要素のイベントが発火しなかった時の備忘録を残す

やり方

動的に追加した要素やリダイレクト時にクリックイベントが発火しなくなった

sample.js

window.addEventListener("load", function () {
    /**
     * @summary 取消ボタン
     */
    $("#skillSheet_template_target").on("click", '#js_jobOffer_delete_button', function () {
        $(this)
            .closest(".scout_job_offer_template_child")
            .fadeOut(function () {
                $(this).remove();
            });

        return false;
    });
});

イベント対象が読み込みされていないので明示的に行う

window.addEventListener("load", function () {
    /**
     * @summary 追加要素の削除
     */
    $(function () {
        $(document).on('click', '#js_jobOffer_delete_button', function () {
            $(this)
                .closest(".scout_job_offer_template_child")
                .fadeOut(function () {
                    $(this).remove();
                });

            const jobOfferId = String($(this).attr("data-id"));
            const name = String($(this).attr("data-name"));
            const jobCode = String($(this).attr("data-jobCode"));

            // 積み上げ削除
            someRemoves(selectedIds, jobOfferId);
            someRemoves(selectedNames, name);
            someRemoves(selectedJobCodes, jobCode);

            return false;
        });
    });
});

さいごに

読んでいただきありがとうございます。
いいねしていただけると記事執筆の励みになりますので、参考になったと思った方は是非よろしくお願いします！