重新打開Fancybox導致我的自定義Ajax函數多次調用

我在Fancybox內使用輸入字段和列表來搜索和提取客戶端，並使用2個自定義Ajax函數。重新打開Fancybox導致我的自定義Ajax函數多次調用

一切正常，但是當重新打開相同的Fancybox時，我的Ajax函數將被觸發多次。

1 AJAX功能：searchClient()，獲取客戶
第二AJAX功能的新名單：selectClient()，獲取客戶信息，並關閉的的fancybox

有沒有辦法來重置fancybox，而不是重新開放？還是需要重新考慮我的功能結構？如果是這樣，怎麼樣？

更新：我只需要重置我的Fancybox內容，在加載dom時首先將內容分配給變量，並在Fancybox關閉時將此變量的內容放回dom中。這將允許Fancybox再次打開相同的內容，並且再次打開所有更改。

修復：

// 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(); 
      } 
     }); 
    } 
});

來源

2013-05-07 jlmmns

您是否使用FB版本1或2？ – megaSteve4 2013-10-28 17:05:38

@ megaSteve4版本2.但我自己修復它。看我的**更新**。 – jlmmns 2013-10-30 11:41:59

@jlmmns如果這個問題得到解決，請添加一個答案（您可以在兩天後接受） - 它會阻止問題出現在未答覆的列表中 – Pete 2013-11-05 14:17:40

解決方案：我只是需要重置我的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 
    } 
});

來源

2013-11-05 19:41:00 jlmmns

重新打開Fancybox導致我的自定義Ajax函數多次調用

回答

相關問題