jqueryでclickイベントが反応しない

    
$(document).ready(function() {
  $(".btnConfirmOK").click(function (e){
    alert("hoge");
  });
}

ライトボックスといいますかdivをモーダル表示するプラグイン(izimodal)を使用している状況で、ダイアログ部に「.btnConfirmOK」というクラス指定したボタンを配置し、上記のようなコードを書きました。

ところが、ボタンを押しても反応しません。
ボタンに直接onclick=”confirm(‘fuga’)”とした場合は反応します。

原因は意外なところにあり、モーダル表示を行うようなプラグインではこの領域を動的に削除し、表示時に再度配置されるような実装になっている場合があります。

すると、readyのタイミングでボタンにclickイベントがバインドされますが、プラグインによりオブジェクトが削除され、表示時には新しく同じ要素が生成されるのですが、この新しく生成されたオブジェクトにはイベントがバインドされていない。ということになるようです。

対策は下記のとおりです。
onで書きます。onは動的に生成されたオブジェクトにも効きます。
記述がみにくいのでよくわからないまま避けたのですが、このような場合onがよいようです

$(document).ready(function() {
  $(document).on('click','.btnConfirmOK',function(){
    alert("hoge"); 
  });
}