jQuery Fancyboxでbindイベントもモーダルする方法 ITかあさん

jQuery Fancyboxでbindイベントもモーダルする方法

jQuery Fancyboxでbindイベントもモーダルする方法

jQueryでappend()やhtml()で追加や変更された要素に対して、さらにclickイベントを入れたい場合はclick()では発動しないですよね、javascriptで追加された要素に対してさらにイベントを入れてあげるにはon()イベントを使って上げますね。

jQuery Fancyboxでもbindしたいよー！

appendやhtmlなど、追加・変更した要素に対してもFancyboxプラグインでモーダル表示させたいなーと思っていたら、同じようなこと試されている方がいらっしゃいました。

$(document).on('click', 'a.fancybox', function() {
$.fancybox(this);
});

こうすれば最低限のモーダルは動くことが分かりましたが、Fancyboxはオプションが超たくさんあるんですね。

例えば、Fancyboxでモーダルの表示が完了した時に何か処理を入れる

$(".js-modal").fancybox({
onComplete: function() {
alert('hoge');
}
});

onイベントで、このモーダルの表示が完了したらどうするのかが分かりませんでしたが、公式サイトを見たり、試行錯誤で出来ました！

$(document).on('click', '.js-modal', function () {
$.fancybox({
'href' : this.href,
'onComplete' : function() {
alert('hoge');
}
});
return false;
});
});

これでOK!最終的には公式サイトで解決！最初からドキュメント読めやってことですね。hrefにはthis.hrefというのもポイントですね。