pjax導入にあたっての注意点

pjaxで移動後にボタンが機能しない！？

今まで普通のリンクでページ遷移していたけど、なんかpjaxってのがあるらしい！と知ってpjaxを書いてみると思わぬ所でハマりました。

pjaxリンクで移動後に作られるボタンがうまく機能しないのです。
ボタンにはjsで、とある動作をbindしていました。

$("#btn_save").click(function() {
  // なんらかの動作
});

実際にはcoffeeで書いていたのでこうです。

$("#btn_save").click ->
  // 何らかの動作

pjaxの仕組みをよくよく考えてみるとこれが動作しないのは明らかでした。
pjaxはXHRリクエストを送り、ajaxでbodyの一部のDOMを置き換え、pushStateでhistoryを追加します。このときjsは一切呼ばれません。
したがってpjaxによって新しい$("#btn_save")というDOMが生成されても、このDOMには上記のclickイベントはbindされないのです。

こういった問題はRuby on Railsのassets pipelineなどでjsファイルを1つに結合している場合に多く起こります。

解決法

これは簡単に解決出来ます。jqueryの.on()を使います。

// js
$(document).on("click", "#btn_save", function() {
  // 何らかの動作
});

// coffee
$(document).on "click", "#btn_save", ->
  // 何らかの動作

ここでのポイントは、.on()を使ってイベントをdocumentにbindさせる点です。
documentにbindしておけば新しくDOMを追加してもちゃんと期待した動作をしてくれます。

document.readyが呼ばれない！？

上に書いたとおりpjaxはあくまでajaxなのでページ遷移ではありません。
したがってdocument.readyは呼ばれません。

// js
$(document).ready(function() {
  // ajaxだと呼ばれない！
});

// coffee
$ ->
  // ajaxだと呼ばれない！

これもはまりやすいのでpjaxを使うときには注意してください。

krswfmy