jquery сделать переменную общедоступной из .click

Question

Я пытаюсь передать переменную из события .click в плагин colorbox следующим образом:

$('.w_price_assess p.price_report > a').live('click', function() {

    var $reportRef = $(this).attr('href');

    var $reportID = $reportRef.substr($reportRef.lastIndexOf('/') + 1);

    return false;

});

Мне нужно, чтобы $reportID был видимым для вызова AJAX, чтобы сформировать часть URL.

Можно ли это сделать?Мои знания об этом явно ограничены: (

Answer 1

Как насчет объявления переменной вне события click и предоставления ей публичной видимости:

var $reportID = null;

$('.w_price_assess p.price_report > a').live('click', function() {

    var $reportRef = $(this).attr('href');

    $reportID = $reportRef.substr($reportRef.lastIndexOf('/') + 1);

    return false;

});

Теперь вы можете использовать $reportID и в других местах вашего скрипта.

Answer 2

Я пытаюсь передать $ reportID для плагина colorbox следующим образом:

// Colorbox dialog window for price report
// Once dialog loaded append navigation header
$('.w_price_assess p.price_report > a').colorbox({
    title: 'Price report',
    transition: 'elastic',
    innerWidth: '800px',
    innerHeight: '650px',
    opacity: '0.5',
    onComplete: function() {
        // Call the dialog header and append
        $.ajax({
            type: 'GET',
            url: DashboardApplicationRoot + 'PriceReport/' + $reportID + '/header',
            dataType: 'html',
            cache: false,
            success: function(data) {
                $('#cboxTitle').append(data);
                // re-initialise form styling
                //$('form.jqtransform').jqTransform();                    
            },
            error: function(xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
                alert(thrownError);
            }

        });

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

        $('#cboxLoadedContent table').removeAttr('width');

        $('.Section1').wrap('<div class="print_me" />');

        $('.Section1').css({
            'width': '95%',
            'margin': 'auto'
        });

        $('.Section1 table').css({
            'width': '100%',
            'margin': 'auto'
        });

        $('#cboxLoadedContent > div').addClass('dialog_loaded');

    },

    onClosed: function() {

        // fixes scroll bar duplication bug
        $('#cboxContent .jScrollPaneContainer').remove();

    }

});