AutoPagerizedなページでもJavaScriptを動かす

あけましておめでとうございます。なんか2010年後半は転職とか引っ越しとかあってあまりここに記事を書けなかったのが残念です。Rubyとか全然さわってねーし、JavaScriptも忘却曲線の彼方。というわけで2011年一発目はJavaScriptについて。

AutoPagerize対応なページで、読み込まれた2ページ目以降でもJavaScriptを動かす方法について調べてみた。oAutoPagerizeのos0xさんのページでまとめられてる。

AutoPagerizeで継ぎ足された部分に自分のスクリプトを適用する方法あれこれ - os0x.blog

以前からある手法から順番に見ていきます。 ページの高さの監視 setIntervalでページの高さを監視して、増えていたらAutoPagerizeが動いたとみなして処理を行う var THRESHOLD = 300; var _height = window.innerHeight; setInterval(function(){ if (window.innerHeight - _height > THRESHOLD) { // 処理 } _height = window.innerHeight; }, 300); メリット AutoPagerizeだけでなく、はてなダイアリー・ブックマーク…

d.hatena.ne.jp

いちばん手っ取り早そうだったので、以下のような書き方をした。

if (window.AutoPagerize) {
  window.AutoPagerize.addFilter(fucintion(){
    // 実行したい処理
  });
}

ただ無名関数は呼び出せないので、二回書かなければならなくなる。これはアホっぽい。関数リテラルにして呼び出し用に function init() みたいのを書き、その中から呼び出せばよい。そしてその init() を上記 // 実行したい処理 内にも書いてあげればオッケーだ（もちろん window.onload で呼び出す必要もある）。

jQueryについては live() というメソッドがある。これは動的に生成された要素にも処理を適用してくれる非常にありがたいメソッドだ。しかし個人的な事情で、 live() というメソッドと一緒に、処理を一度しか実行しないというメソッド one() も適用している要素があり、これを二つ両立するのがjQuery的に無理っぽい。単純に処理実行のフラグを作って処理を分ければいいんだけど、これにもjQuery的なかっこいい書き方があることを知った。ネタもとはこちら。

Using .one() with .live() jQuery

I was using the live() function: $('a.remove_item').live('click',function(e) {}); I needed to change this to one() to prevent multiple clicks, however when I inject one of these elements after th...

stackoverflow.com

$('処理を適用したい要素').live('click', function(e) {
  if($(e.target).data('oneclicked')!='yes')
  {
    //Your code
  }
  $(e.target).data('oneclicked','yes');
});

jQuery().data() 、なかなか便利そうだ。