window.confirmでキャンセルが効かない

Question

Adminlteにはカードを削除するボタンがあります。
このボタンをクリックするとカードを削除するためのイベント発火します。

<button type="button" class="btn btn-tool remove_confirm" data-card-widget="remove"><i class="fas fa-times"></i></button>

function(e) {
  e && e.preventDefault(), I._jQueryInterface.call(n.default(this), "remove")
}

下記のようなコードを追加することでダイアログを表示し、
OKで削除、キャンセルで削除しないという動作が可能でした。

$(".remove_confirm").on('click', function(){
  if(window.confirm("本当に削除してよろしいですか？")) {
    return true;
  } else {
    return false;
  }
});

しかし上記のコードでは動的に追加した要素には効かないため、
動的に追加したカードのボタンを押してもダイアログが表示されません。
そこで下記のような記述に書き換えました。

$(document).on("click", ".remove_confirm", function (event) {
  if(window.confirm("本当に削除してよろしいですか？")) {
    return true;
  } else {
    return false;
  }
});

この方法では動的に追加したカードにもダイアログは表示されるようになったものの、
キャンセルを押しても削除が実行されてしまいます。
どのようにすればキャンセルが可能になるでしょうか。

Adminlteのvender階層にあるjavascriptは編集しない前提です。

Answer 1

セレクタを$(document)から$(".contet")と狭めたところ何故かうまくいきました。

$(".contet").on("click", ".remove_confirm", function (event) {
  if(window.confirm("本当に削除してよろしいですか？")) {
    return true;         
  } else {
    return false;
  }
});

うまくいった理屈はあまりよく分かっていないのですが、
ひとまず良しとします。
解説出来る方がいればぜひお願いします。

Comments

[maisumakun]

iOSの場合、そのままだとdocumentまでclickイベントが伝わらない、という実装になっています。

[algo]

「そのままだと」とは$(document)だと、ということでしょうか。
$(document)にした場合はOSブラウザ問わずダメでした。
$(".contet")にした場合はiOSを含めどのブラウザでも問題なさそうです。