pjaxで少し躓いたメモ

ほんとにメモ。

pjaxで読み込まれるコンテンツは扱いとしては動的に生成された要素だからなのか、うまく動かない点がありました。

セレクタを固定で書いていると動的に生成される部分にイベントを設定した場合にうまく動きません。

例えばクリックイベントを

$('#hoge').click(function(){
//処理
});

$('#hoge').click(function(){

//処理

});

と書いていると、最初に存在する$(‘#hoge’)には反応するけど、pjaxで読み込んだエリアにそのセレクタがあってもそれには反応しません。

なので、セレクタを引数として持つような書き方にするといいみたいです。

$(document).on('click', '#hoge', function(){
//処理
});

$(document).on('click', '#hoge', function(){

//処理

});

　iPhoneだと、pjaxで遷移したコンテンツのアイキャッチ画像が表示されないという現象が起きました。CSSでmax-widthとheightを指定しており、なぜかそれらを外すと表示されるのですが、当然画像がレスポンシブに対応してません。

色々試したところsrcsetが記述されている場合にその現象が起きているようでした。

WordPressの現バージョンではアイキャッチ画像表示のソースはsrcset付きがデフォルトなので、それをfunctions.phpでオフにしました。

add_filter( 'wp_calculate_image_srcset', '__return_false' );

1	add_filter( 'wp_calculate_image_srcset', '__return_false' );

以上、正解の解決法かはわかりませんが、取り急ぎ。