获取对 jQuery DOM 元素的新引用

Question

我正在使用我找到的灯箱脚本。我称它为内联

javascript:lightbox(mycontent)

工作正常。 mycontent 是这样分配的：

mycontent = $('#mycontent');

所以我点击了锚点，这会加载包含我的内容的灯箱。太好了。但是当我更新我的内容（例如更改某些字段值）时，这不会影响我的灯箱中的内容。

这是我正在使用的灯箱脚本：

function lightbox(insertContent, ajaxContentUrl) {
    // add lightbox/shadow <div/>'s if not previously added
    if ($('#lightbox').size() == 0) {
        var theLightbox = $('<div id="lightbox"/>');
        var theShadow = $('<div id="lightbox-shadow"/>');
        $(theShadow).click(function (e) {
            closeLightbox();
        });
        $('body').append(theShadow);
        $('body').append(theLightbox);
    }


    // remove any previously added content
    $('#lightbox').empty();
    // insert HTML content
    if (insertContent != null) {
        $('#lightbox').append(insertContent);
    }
    // insert AJAX content
    if (ajaxContentUrl != null) {
        // temporarily add a "Loading..." message in the lightbox
        $('#lightbox').append('<p class="loading">Loading...</p>');
        // request AJAX content
        $.ajax({
            type: 'GET',
            url: ajaxContentUrl,
            success: function (data) {
                // remove "Loading..." message and append AJAX content
                $('#lightbox').empty();
                $('#lightbox').append(data);
            },
            error: function () {
                alert('AJAX Failure!');
            }
        });
    }
    // move the lightbox to the current window top + 100px
    $('#lightbox').css('top', $(window).scrollTop() + 100 + 'px');
    // display the lightbox
    $('#lightbox').show();
    $('#lightbox-shadow').show();
}

// close the lightbox
function closeLightbox() {
    // hide lightbox and shadow <div/>'s
    $('#lightbox').hide();
    $('#lightbox-shadow').hide();
    // remove contents of lightbox in case a video or other content is actively playing
    $('#lightbox').empty();
}

看起来脚本正在尝试使用 empty() 清除以前的内容，但由于某种原因，我总是得到最初加载的内容。我的脚本的其余部分很好，因为我得到了正确的 console.log 返回。

因此，如果我加载灯箱，然后将其关闭，然后单击一个按钮，该按钮会尝试更改灯箱内的任何元素。没有效果。

对此有任何提示吗？如果不清楚，我会发布完整的脚本。但基本上，似乎我需要删除对原始 DOM 元素选择的任何引用，然后重新选择它？

编辑：这是我正在使用的完整代码块：

        $(document).ready(function(){
var cookieControl = new Object();

cookieControl.buttonAction = addOrRemove;
cookieControl.setFields = setFields;
cookieControl.countOptions = 0;
cookieControl.newPage = onPageReload;
cookieControl.setAll = setAll;
cookieControl.option;
cookieControl.updateBag = updateBag;

cookieControl.design = jQuery.cookie('design');
cookieControl.print = jQuery.cookie('print');
cookieControl.web = jQuery.cookie('web');
cookieControl.strategy = jQuery.cookie('strategy');
cookieControl.development = jQuery.cookie('development');

// JS variables to track set on current page
cookieControl.jsDesign = 0;
cookieControl.jsPrint = 0;
cookieControl.jsWeb = 0;
cookieControl.jsStrategy = 0;
cookieControl.jsDevelopment = 0;
// END

cookieControl.setFields();
cookieControl.newPage();

cookieControl.updateBag();

function updateBag(){
    if( cookieControl.countOptions > 0 ){
        $('.basket-icon').addClass('blue-bag');
    }else{
        $('.basket-icon').removeClass('blue-bag');
    }
}

function onPageReload(){
    if( cookieControl.design == 1){ cookieControl.countOptions++; $('.add-to-enquiry:eq(0)').addClass('remove-cookie').html('remove from enquiry <i class="fa fa-chevron-right">'); }
    if( cookieControl.print == 1){ cookieControl.countOptions++; $('.add-to-enquiry:eq(1)').addClass('remove-cookie').html('remove from enquiry <i class="fa fa-chevron-right">'); }
    if( cookieControl.web == 1){ cookieControl.countOptions++; $('.add-to-enquiry:eq(2)').addClass('remove-cookie').html('remove from enquiry <i class="fa fa-chevron-right">'); }
    if( cookieControl.strategy == 1){ cookieControl.countOptions++; $('.add-to-enquiry:eq(3)').addClass('remove-cookie').html('remove from enquiry <i class="fa fa-chevron-right">'); }
    if( cookieControl.development == 1){ cookieControl.countOptions++; $('.add-to-enquiry:eq(4)').addClass('remove-cookie').html('remove from enquiry <i class="fa fa-chevron-right">'); }

    $('.number-options-added').text( cookieControl.countOptions );
}

function setAll(){
    jQuery.cookie( 'design' , 1, { path: '/'});
    jQuery.cookie( 'web' , 1, { path: '/'});
    jQuery.cookie( 'print' , 1, { path: '/'});
    jQuery.cookie( 'strategy' , 1, { path: '/'});
    jQuery.cookie( 'development' , 1, { path: '/'});

    $('.number-options-added').text( 5 );
}

$('.add-to-enquiry').click(function(){
    var pos = $(this).index('.add-to-enquiry');
    cookieControl.buttonAction( pos );
    cookieControl.updateBag();
});


$('.add-all-options').click(function(){
    cookieControl.setAll(); 
    cookieControl.updateBag();
    alert('All services have been added to your enquiry!');
});


function setFields(){
    if(cookieControl.design == 1 || cookieControl.jsDesign == 1){
        $('#design_field').val("design");
    }

    if(cookieControl.print == 1 || cookieControl.jsPrint == 1){
        $('#print_field').val("print");
    }

    if(cookieControl.web == 1 || cookieControl.jsWeb == 1){
        $('#web_field').val("web");
    }

    if(cookieControl.strategy == 1 || cookieControl.jsStrategy == 1){
        $('#strategy_field').val("strategy");
    }

    if(cookieControl.development == 1 || cookieControl.jsDevelopment == 1){
        $('#development_field').val("development");
    }
}

function addOrRemove( pos ){

    if(pos == 0){
        cookieControl.option = 'design';
    }else if(pos == 1){
        cookieControl.option = 'print';
    }else if(pos == 2){
        cookieControl.option = 'web';
    }else if(pos == 3){
        cookieControl.option = 'strategy';
    }else if(pos == 4){
        cookieControl.option = 'development';
    }

    // remove cookie
    if($('.add-to-enquiry').eq(pos).hasClass('remove-cookie')){

        $('.add-to-enquiry').eq(pos).removeClass('remove-cookie');
        $('.add-to-enquiry').eq(pos).html('add to enquiry <i class="fa fa-chevron-right">');

        jQuery.removeCookie( cookieControl.option, { path: '/'} );

            if(pos == 0){
                cookieControl.jsDesign = 0;
            }else if(pos == 1){
                cookieControl.jsPrint = 0;
            }else if(pos == 2){
                cookieControl.jsWeb = 0;
            }else if(pos == 3){
                cookieControl.jsStrategy = 0;
            }else if(pos == 4){
                cookieControl.jsDevelopment = 0;
            }

        cookieControl.countOptions--;
        $('.number-options-added').text( cookieControl.countOptions );
    }else{
        $('.add-to-enquiry').eq(pos).addClass('remove-cookie');
        $('.add-to-enquiry').eq(pos).html('remove from enquiry <i class="fa fa-chevron-right">');

        jQuery.cookie( cookieControl.option, 1, { path: '/'});

            if(pos == 0){
                cookieControl.jsDesign = 1;
            }else if(pos == 1){
                cookieControl.jsPrint = 1;
            }else if(pos == 2){
                cookieControl.jsWeb = 1;
            }else if(pos == 3){
                cookieControl.jsStrategy = 1;
            }else if(pos == 4){
                cookieControl.jsDevelopment = 1;
            }

        cookieControl.countOptions++;
        $('.number-options-added').text( cookieControl.countOptions );

    }


    cookieControl.setFields();

}

theform = $('#theform');
jQuery("#contactForm").validate();

 });

其中很多与我的问题无关，但我认为完整地查看我的代码会更有意义。

id 为“theform”的 div 包含实际的表单。不过，这似乎无关紧要，因为我的问题不在于更新表单，而是在第一次调用灯箱后更新灯箱内的任何内容。如您所见，我的 checkFields 函数被正确调用，如果我使用 console.log 返回信息，我会得到正确的数据。但这不会影响我的表单。

Answer 1

您可能需要手动重新初始化您的灯箱。 你用的是什么版本？