jquery ajax完了してから

jsで要素の高さを取得などするときに、その要素がajaxで読み込まれたものだと、document.readyで取得しようとしても、そのタイミングではまだajaxが完了していない。

$(document).ajaxComplete(function() {
obj_top = $(‘#table_head_time’).offset().top;//ページの読み込み完了してから位置を取得
});

ajaxCompleteは、ajaxの完了のタイミングで動く。
複数のajaxが動いた場合は、その度にここが実行されるのだと思う。

slick スライダーのjQuery

wpに入れるときは、jsを読み込ませまして、下の方に

これを書いておく。
ーーー
モバイルで右側にはみ出すものがありますが、それは矢印です。
.slick-slider .slick-next {
right: 15px;
}
ーーー

ajaxで追加した要素にイベント

ajaxで追加した要素は、js読み込みの時点では存在していないので、後から追加する要素にイベント(クリックなど)を設定することができない。
#table_areaの中身をajaxで追加するとして、そのテーブルの中のtdにイベントを設定したい場合。

これでは動かない。tdがないから。
$(“td”).on(‘click’, function() {

こうする
$(“#table_area”).on(‘click’,’td’, function() {

#table_areaは最初から存在するものとする。
onの関数の二つ目の引数に、トリガーとなる要素を設定するのです。

複数のトリガーがある場合はこんな感じ。
$(“#table_area”).on({
‘mouseenter’: function() {
if(!$(‘#toggleCancelBtn’).prop(‘checked’)){
if ($(this).text() === “” && !$(this).hasClass(‘rsvFlag’)) {
$(this).addClass(‘hoverFlag’);
}
}else{
if ($(this).hasClass(‘myReserve’)) {
$(this).addClass(‘hoverFlag’);
}
}
},
‘mouseleave’: function() {
if(!$(‘#toggleCancelBtn’).prop(‘checked’)){
if ($(this).text() === “” && !$(this).hasClass(‘rsvFlag’)) {
$(this).removeClass(‘hoverFlag’);
}
}else{
if ($(this).hasClass(‘myReserve’)) {
$(this).removeClass(‘hoverFlag’);
}
}
},
},”td”);

【ローカルDB】 Loacal Strage,Indexed DB,store.js

ブラウザにデータを保存する。
クッキーは数キロバイトしか保存できないのに対して、Local Storageは数メガバイト保存することができる。

そのままでは、keyとvalueしか保存できないので、オブジェクトを保存できるようにしたプラグインがstore.js。
これはjsonでデータを渡すと、中で何か上手いことやってくれてオブジェクトで取り出せるようになるという優れもの。

IndexedDBは、それをさらにSQLっぽく使える。インデックスを貼ってくれるとか。検索ができるようになるとか。

masonry

jQuery(function($){

$(window).on(‘load’, function() {

$(‘.grid’).masonry({
// options
itemSelector: ‘.grid-item’,
columnWidth: ‘.grid-item’,
stagger: 30
});
});

});

画像の読み込みが終わってから動かさないと、外側の縦幅の計算がうまくいかない。
親要素のクラスに「grid」、子要素のクラスに「grid-item」(上のサンプルだとそうなる)と設定すること。

http://cly7796.net/wp/javascript/started-with-masonry/