jQuery - Trigger event from within iFrame on parent document

Is there any reason why this is not working:

Parent document开发者_Python百科

$(document).ready(function($) {
        $('.upload-media').click(function(){
            if( $(this).parent().find('iframe')[0] )
                return false;
            $(this).parent().append('<iframe class="media-iframe" src="'+this.href+'"></iframe>');
            var ifr = $(this).parent().find('iframe');
            $(document).bind('closeFrame', function(){ alert("event"); });
            return false;   
        }); 
    });

iFrame

$(document).ready(function() {
    $("#media-frame-close").click(function(){
        window.parent.$(window.parent.document).trigger('closeFrame');
        return false;
    });
});

Seems pretty straight forward, I've tried parent. instead of window.parent and that isn't working either :(

I've not been able to find a way to access the jQuery trigger for the document, though if you do the following you can achieve the same thing.

$(document).ready(function(){
    $('.frame').click(function(){
        if( $(this).parent().find('iframe')[0] )
        {
            return false;
        }

        $(this).parent().append('<iframe class="media-iframe" src="'+this.href+'"></iframe>');

        var ifr = $(this).parent().find('iframe');

        // Adding function directly to the document rather than using jQuery.bind/trigger
        document.closeFrame = function(){ alert("event"); };

        return false;
    });
});

$(document).ready(function(){
    $("#media-frame-close").click(function(){
        window.parent.document.closeFrame();
        return false;
    });
});

Of course this pollutes the Document Object but it will do what you want.

top.document works well from an iframe (presuming iframe has jQuery too)

$('#ID', top.document).someFunction();