jQueryUI .dialog(option) buttonに対してidを付けること可能でしょうか？

Question

jQueryUI公式サイト
jQueryUI.dialogを使用してダイアログを表示させています。

button要素に対して、クリックされた際に他で定義した、共通イベントを発生させたいのですが、id識別させるための設定が調べても分かりませんでした。
ご存じの方いらっしゃいましたら、ご教示いただけますと幸いです。

// dialogのボタン押下時、以下を動かしたい。idがbtnで前方一致していてクリック時、発生するイベント。
$("[id^='btn']").on('click', function (e) {
    if (!func()) {
        // セッションタイムアウト時、同時に発生したイベントはすべて中断される
        e.stopImmediatePropagation();
    }
    return false;
});
*****************************************************************************
$('#div').dialog({
        modal: true,
        width: 530,
        height: 310,
        title: '○○',
        buttons: {
            'OK': function () {
               ・・・・以下処理
            },
            'キャンセル': function () {
                // ダイアログを閉じる
                $(this).dialog('close');
            }
        },
        // 以下でclassは定義しているが、idはできなかった
        create: function () {

            var $dialogButton = $(this).closest('.ui-dialog').find('.ui-dialog-buttonset button');
            var $dialogTitle = $(this).closest('.ui-dialog').find('.ui-dialog-title');

            // ダイアログにクラスを設定する
            $dialogButton.addClass('margin-l35 margin-t05 btn btn-success btn-xs');
            $dialogButton.css('height', '30px');
            $dialogButton.css('font-size', '18px');
            $dialogTitle.css('font-size', '24px');
        }
    });

Comments

[kei344]

プラグイン／ライブラリは公式配布サイトのURLを質問文に追記ください。（URLにはリンクを張ることができます）

[cham_danb]

ご指摘ありがとうございます。質問文に追記いたしました。

Answer 1

idの設定は以下のように記載します。

$dialogButton.attr('id', 'btn_dialog');

また動的に作成した要素のイベントは、$("[id^='btn']").on('click', function～)では捉えられないです。
以下のように記載してください。

$(document).on("click", "[id^='btn']", function～)

https://qiita.com/negi/items/6ec0d3cedba499eac81a

Comments

[cham_danb]

ご回答ありがとうございます。
なるほど・・・そうゆうことになっているんですね。
.dialogのボタンに対してiはclassは設定されているのですが
---$(document).on("click","[class='btn']",function()~)---
と書くということでしょうか？

[satokei]

すみません。早とちりをしていましたね。
「以下でclassは定義しているが、idはできなかった」
　↑（idを指定しても、clickイベントを捉えなかったと解釈してました）

id指定は以下でできないですか？（一意である必要があります）
$dialogButton.attr('id', 'btn～');

-------------------
【別案】
clickイベント時の処理を関数で定義して、以下でよいかも
例）関数名：btnOnClick とした場合
$dialogButton.on('click', btnOnClick)

[cham_danb]

ご連絡遅くなり申し訳ありません。
$dialogButton.attr('id', 'btn_dialog');でidを指定することができました！
そして
$(document).on("click", "#btn_dialog~", function(){
（処理）
});
で指定したidに対してイベントを発生させることができました。

別案でご提案していただいた方も試してみました。
こちらはdialogButtonが生成されていないと、定義されていないためエラーが発生しました。
dialogButtonが生成されているときのみに動くようにすれば良いかもしれませんが、記述方法がわかりませんでした。

ご回答いただいた内容で解決いたしましたので、ベストアンサーとさせていただきます。

[satokei]

了解しました。また回答を更新しました。