colorboxでiframe読み込んだ際のイベント処理等はcbox_complete＆load後にする必要がある

27/09/201621/05/2019

概要

colorboxとiframeの組み合わせでちょっと詰まったのでメモ。

タイトルそのままですが、iframe読み込んだ際のイベント処理等は

cbox_complete＆iframeのload後に処理する必要があるっぽいです。

iframe内の要素取得

iframeは普通にjqueryのセレクタだと駄目っぽいです。

$(“**”).contents().find()

でiframeの中身にバインドできるみたいです。

$('iframe a').click(function(e) {
    // 駄目っぽい
})
$('iframe').contents().find('a').click(function(e) {
    //　なんか処理
})

クリックでcolorboxのiframe呼び出してモーダルコンテンツ切り替えて

iframe内の要素にもクリックのイベントつけたいような内容だったのですが

どうも上記だとiframe内の要素取得自体できない様子。

cbox_complete

colorboxのリファレンスみるとcbox_completeなるものがあったので

http://www.jacklmoore.com/colorbox/

多分これだなって事でやってみる

$(document).bind('cbox_complete', function(){
    console.log($('iframe').contents().find('a'));// 駄目っぽい
})

でも駄目っぽい

iframe load

iframeにもload()つけるといけました。

$(document).bind('cbox_complete', function(){
    $('iframe').load(function() {
        console.log($('iframe').contents().find('a'));// いけまっせ。
    })
})

completeとかっていうからなんとなくできそうですが。
まぁそうかという感じですね。

document ready

とかと同じ感じだと思います。