Fancybox를 다시 열면 사용자 정의 Ajax 함수가 여러 번 호출됩니다.

Question

두 개의 사용자 정의 Ajax 함수가있는 Fancybox 내부의 입력 필드와 목록을 사용하여 클라이언트를 검색하고 가져옵니다.

모든 기능이 작동하지만 동일한 Fancybox를 다시 열면 Ajax 기능이 여러 번 트리거됩니다.

• 1 아약스 기능 : 재설정 할 수있는 방법이 있나요 selectClient()의 Fancybox

를 클라이언트 정보를 가져와 종료 : searchClient()는 2 아약스 기능은

고객

의 새로운 목록을 검색 fancybox, 다시 열기보다는? 또는 함수 구조를 다시 생각해야합니까? 그렇다면 어떻게?

업데이트 : 나는 Fancybox 콘텐츠를 다시 설정해야합니다. 먼저 dom이로드 될 때 콘텐츠에 변수를 할당하고 Fancybox가 닫힐 때이 변수의 콘텐츠를 다시 dom에 저장해야합니다. 이렇게하면 Fancybox는 동일한 내용을 다시 열 수 있으며 모든 변경없이 다시 열 수 있습니다.

신용장은 Nick Tomlin입니다.

수정 :

// on DOM ready 
var popup = $('#popup-contacts').html(); 

// Fancybox 
$.fancybox.open({ 
    href: '#popup-contacts', 
    padding: 0, 
    autoWidth: true, 
    arrows: false, 
    closeBtn: false, 
    scrollOutside: true, 
    helpers: { 
     overlay: { 
      css: { 
       'background': 'rgba(0, 0, 0, 0.5)' 
      }, 
      locked: false 
     } 
    }, 
    afterShow: function() { 
     selectClient(); 
     searchClient(); 
    }, 
    afterClose: function() { 
     $('#popup-contacts').html(popup); // Reset popup content 
    } 
}); 

원본 코드 :

function searchClient() { 
    $('.popup .search').keyup(function(k) { 
     if ((k.keyCode >= 48 && k.keyCode <= 90) || (k.keyCode >= 96 && k.keyCode <= 105) || k.keyCode == 8 || k.keyCode == 46 || k.keyCode == 109 || k.keyCode == 189) 
     { 
      var search = $.trim($(this).val()); 

      var dataString = 'ajax=true&action=searchClient&search='+encodeURIComponent(search); 

      $.ajax({ 
       type: 'POST', 
       url: $(this).attr('rel'), 
       cache: false, 
       data: dataString, 
       dataType: 'json', 
       success: function(response) { 
        if (response.status == 'match') { 
         $('.popup-contacts').find('ul').html(response.clients); 
         selectClient(); 
        } 
        if (response.status == 'error') { 
         $('.popup-contacts').find('ul').html('<li>'+response.message+'</li>'); 
        } 
       }, 
       error: function() { 

       } 
      }); 
     } 
    }); 
} 


function selectClient() { 
    $('.popup ul li').click(function() { 
     var contactNumber = $(this).attr('rel'); 
     var dataString = 'ajax=true&action=selectClient&contactNumber='+contactNumber; 

     $.ajax({ 
      type: 'POST', 
      url: $(this).parent().attr('rel'), 
      cache: false, 
      data: dataString, 
      dataType: 'json', 
      success: function(response) { 
       if (response.status == 'success') { 
        $('textarea[name="infoTo"]').focus().val(response.clientInfo); 
        $.fancybox.close(); 
       } 
       if (response.status == 'error') { 

       } 
      }, 
      error: function() { 

      } 
     }); 
    }); 
} 


// Open Fancybox 

$('textarea[name="infoTo"]').focus(function() { 
    if ($.trim($(this).val()) == '') 
    { 
     $.fancybox.open({ 
      href: '#popup-contacts', 
      padding: 0, 
      autoWidth: true, 
      arrows: false, 
      closeBtn: false, 
      scrollOutside: true, 
      helpers: { 
       overlay: { 
        css: { 
         'background': 'rgba(0, 0, 0, 0.5)' 
        }, 
        locked: false 
       } 
      }, 
      afterShow: function() { 
       selectClient(); 
       searchClient(); 
      } 
     }); 
    } 
}); 

Answer 1

솔루션 : 난 그냥 먼저 DOM이로드 변수에 내용을 할당하여, 내 Fancybox 내용을 재설정하고 넣어 필요 Fancybox가 닫힐 때 dom에이 변수의 내용. 이렇게하면 Fancybox는 동일한 내용을 다시 열 수 있으며 모든 변경없이 다시 열 수 있습니다.

신용장은 Nick Tomlin입니다.

수정 :

// on DOM ready 
var popup = $('#popup-contacts').html(); 

// Fancybox 
$.fancybox.open({ 
    href: '#popup-contacts', 
    padding: 0, 
    autoWidth: true, 
    arrows: false, 
    closeBtn: false, 
    scrollOutside: true, 
    helpers: { 
     overlay: { 
      css: { 
       'background': 'rgba(0, 0, 0, 0.5)' 
      }, 
      locked: false 
     } 
    }, 
    afterShow: function() { 
     selectClient(); 
     searchClient(); 
    }, 
    afterClose: function() { 
     $('#popup-contacts').html(popup); // Reset popup content 
    } 
});