jQuery DOM 요소에 대한 새 참조 얻기

Question

발견 한 라이트 박스 스크립트를 사용하고 있습니다.

javascript:lightbox(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(); 
} 

로드. 올바른 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

아마도 라이트 박스를 수동으로 다시 초기화해야합니다. 어떤 버전을 사용하고 있습니까?