動的に生成された複数の要素に、生成されたタイミングで処理を行いたい

jqueryメソッドを拡張ちて、カスタムイベントを登録したでちゅ。

(function()
{
    // ajaxエミュレーション用データ
    var idx = 0;
    var key = ["aaa", "bbb", "ccc", "ddd", "eee"];

    $(document).ready(function()
    {
        // buttonにカスタムイベントコールバックを定義するのでちゅ。
        $(document).bind("custom-append", "button", function(e)
        {
            $(e.data).text( $(e.data).attr("data-name") );
        });
        // jQueryメソッドの拡張
        var jquery_original_after = $.fn.after;
        $.fn.after = function()
        {
            // jQueryのafterメソッドを使うと、custom-appendイベントが発生するのでちゅ。
            return jquery_original_after.apply(this, arguments).trigger("custom-append");
        };


        // チェックボックスイベントコールバック
        $(document).on("change", "input[type=checkbox]", function()
        {
            if(!$(this).prop("checked"))
            {
                $(this).siblings("button").remove();
                return true;
            }

            // 以下、ajaxをエミュレート
            var self = $(this);
            setTimeout(function()
            {
                var button  = $("<button/>").attr("type", "button").attr("data-name", key[idx++]);
                self.after(button);
                idx %= key.length;
            }, 1000);
        });
    });
})();

こんにちは

ご質問にある要件を満たす方法として、指定したコールバックを DOM の変更時に実行させる、 MutationObserver を使ってみる、というのが考えられます。

以下、その使用例のサンプルです。

追加される複数のボタン全体を囲む <div> を以下のように用意しておきます。

<div id="buttons-area"></div>

次に、上記の#buttons-areaの子ノードを検知するように、MutationObserverを設定する関数を以下

const setupObserver = function() {

    const callback = function(mutationsList, observer) {
      for(var mutation of mutationsList) {
        if (mutation.type == 'childList') {
            const button = $(mutation.addedNodes[0]);
            button.text(button.data('name'));
        }
      }
    };
    const observer = new MutationObserver(callback);

    const targetNode = document.getElementById('buttons-area');

    observer.observe(targetNode, { childList: true });
};

のように作っておき、これをdocument が readyになったときに使います。

$(function() {

  setupObserver();

  // ・・・

});

以下は、上記のサンプルです。

• 動作確認用サンプル： https://jsfiddle.net/jun68ykt/9amtjyf7/6/

このサンプルは以下のように動作します。

• チェックボックスをチェックすると、 AJAXでリクエストを送ります。（チェックを外すときはリクエストされません）
• 疑似APIっぽく見せるために、レスポンスが返されるまでに約１秒、遅延するようにしています。
• レスポンスは以下のようなHTMLです。

<button data-name="PAVCJNVQ" type="button"><!--空っぽ--></button>

• 上記で、data-name 属性の値は、リクエストごとに生成されるランダムな英数字８文字の文字列になります。
• AJAXのsuccess時のハンドラでは、このHTMLから作られる、テキストが空のボタンを#buttons-areaに追加します。
• ボタンが追加されると、MutationObserverに設定されたコールバックが呼ばれて、以下の処理

  const button = $(mutation.addedNodes[0]);
  button.text(button.data('name'));

が行われ、ボタンのテキストが data-name属性の値に変更されます。

以下の画像は、チェックボックスをチェックする、外すという操作を繰り返して、３回AJAXでリクエストを送信した後に表示されるボタンと、console です。

consoleには、各AJAXによるリクエストで返されるレスポンスHTMLが表示されています。

以上、MutationObserver をお使いになってみてはいかがでしょう、というご提案の回答になります。
参考になれば幸いです。

別の質問に回答した通り $('button').each() で処理すればOKでしょう。
https://teratail.com/questions/188785#reply-280264

ご記載の方法だと、documentのeachイベントの発火を待つ意味になります。そんなイベントは起きないので動きません。