Bind event on FancyBox iFrame element

Question

Я пытаюсь связать событие с элементом, который является ajax, загруженным в iFrame, загруженным в fancyBox.

Heres - это мой код, который находится на странице, которая загружает Box. Не в плавающем фрейме:

$('a.box').fancybox({ 
    helpers : { 
     overlay : { 
      css : { 
       'background' : 'rgba(255, 255, 255, 0.6)' 
      }, 
      locked: false 
     } 
    }, 
    padding : 0, 
    width: 868, 
    fitToView: true, 
    iframe: { 
     preload : true 
    }, 
    beforeShow: function(){ 
     $('.fancybox-iframe').contents().find('.admin-content').css('width', '100%'); 
     console.info('Content Showing'); 
     alert('content SHowing'); 
    }, 
    afterLoad: function(){ 
     alert('content loaded'); 
     $('.fancybox-iframe').ready(function(){ 
      console.info('Content loaded'); 
      console.info($('.fancybox-iframe').contents().find('a.read-only')); 
      $('.fancybox-iframe body').find('a.read-only').bind('click', function(e){ 
       e.preventDefault(); 
       var link = $(this); 
       var media_type = link.data('media_type'); 
       parent.$.fancybox.close(); 

       var $mce = parent.tinymce.get('<?php echo $mceclass; ?>'); 
       var content = ''; 
       if (media_type == 'image'){ 
        var img = link.find('img'); 
        var img_src = img.attr('src'); 
        var img_alt = img.attr('alt'); 
        var imgzoom_src = img.attr('src').replace('_thumb', '_zoom'); 
        content = '<a href="'+imgzoom_src+'" class="fancy" title="'+img_alt+'"><img src="'+img_src+'" width="'+SUBO_IMG_THUMB_WIDTH+'" alt="'+img_alt+'"/></a>'; 
       }else if(media_type == 'video' || media_type == 'audio'){ 

       }else{ 

       } 
       $mce.focus(); 
       $mce.insertContent(content); 
      }); 
     }); 
    } 
}); 

Pleae Обратите внимание, что есть много тестов, которые я сделал, и я заметил, что console.log не показывает в Firebug ...

Я использую FancyBox 2, а страница и iframe находятся в одном домене.

Любая помощь будет оценена по достоинству.

Спасибо.

Pierre M.

Answer 1

Вам может понадобиться использовать afterShow обратный вызов в bind ваших событий внутри фрейма и предназначаться соответствующими селекторами (вы всегда должны использовать метод .contents() найти селекторов внутри фрейма) так попробовать:

jQuery(document).ready(function ($) { 
    $("a.box").fancybox({ 
     // API options 
     type: "iframe", // you need this 
     afterShow: function() { 
      $(".fancybox-iframe").ready(function() { 
       $(".fancybox-iframe") 
        .contents() 
        .find(".close") // find your selector 
        .on("click", function (e) { 
         e.preventDefault(); 
         // do something here after click 
       }); // on click 
      }); // iframe ready 
     } // afterShow 
    }); // fancybox 
}); // ready 

ПРИМЕЧАНИЕ: отношения iframe и ajax подчиняются Same origin policy