Altering inline styles and HTML attributes on dynamically loaded iframe via colorbox

Question

I am trying to remove some inline style that are produced on some tables in a page i am pulling in via colorbox iframe.

jQuery:

$('.w_price_assess p.price_report > a').colorbox({
    title: 'Price report',
    transition: 'elastic',
    innerWidth: '900px',
    innerHeight: '699px',
    opacity: '0.5',
    iframe: true,
    onComplete: function() {
        // Call the dialog header and append
        $.ajax({
            type: 'GET',
            url: '../Content/dialog_head.htm',
            dataType: 'html',
            cache: false,
            success: function(data) {
                $('#cboxTitle').append(data);
            },
            error: function(xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
                alert(thrownError);
            }

        });

        // re-initialise scroll bars
        $('#cboxLoadedContent').jScrollPane();

        // load colorbox print CSS
        $('head').append('<link rel="stylesheet" type="text/css" href="../Content/styles/icis.dashboard.colorbox.print.css" media="print">');

        // give iframe unique ID
        $('#cboxLoadedContent iframe').attr('id', 'color_frame');
        // remove widths on tables in iframe
        $('#cboxLoadedContent iframe table').removeAttr('width');

    }
});

Does the jQuery to remove the attribues and styles on the newly loaded content need to be applied in the head of the new document?

Answer 1

I believe all you have to do is use the delegate event. Since it is loaded in after the windows is loaded.