ajax呼出しやDOM要素変更後にjQueryが動かないときの対処法

ajax呼出し後やHTMLへのDOM要素の追加後に、javascriptの関数が動かないこと、よくありますよね。

原因はいろいろあるんですが、初回はうまく動くのに、２回目以降や、何か操作をした後に動かない場合は、多くの場合、イベントハンドラをリバインドするとうまくいく かもしれません。

そのやり方について、Tipsを。

最近のjava scriptのライブラリやjQueryを利用したライブラリでは、画面のロード時に、ある要素に対してイベントハンドラを「バインド」(bind)することが多いです。

これによりその要素がクリックされたときに、あらかじめ決めてあった動きが行なわれるわけですね。

たとえば、モーダル表示によく利用するjQueryプラグイン『Magnific Popup』などは、下記のように、画面ロード時に初期化してバインド（そのclass要素に対して、イベントハンドラを関連付ける。）を行なったりします。

$(function(){
  $('.popup-img').magnificPopup({
      type: 'image'
  });
});

しかし、ajaxで別なコンテンツをロードしたときや、java scriptで別のDOM要素を挿入したときは、新しい要素に対してはイベントハンドラのバインドがされません。

画面ロードの際にバインドしており、その後追加された新しい要素に対しては紐付いていないので、あたりまえですよね。

なので、ボタンや要素をクリックしても「動かねー」ということになってしまいます。

そういう場合、以下のように、バインドする初期化処理を別に切り出し、画面ロード時やコンテンツが追加ロードされたとき、ajaxで新しいコンテンツがロードされたときにその関数を呼び出してあげるようにするとよいです。

たとえば、こんな感じ。

//バインドする関数を定義
function bindModal(){
  $('.popup-img').magnificPopup({
      type: 'image'
  });
}

//上記の関数を、画面ロード時に呼ぶ。
$(document).ready(function(){
  bindModal();
});

//あとは、ajax完了時など、要素が追加されたときにも呼び出すようにする。