我在 Fancybox 中使用输入字段和列表来搜索和获取客户端，并带有 2 个自定义 Ajax 函数。
一切正常，但是当重新打开同一个 Fancybox 时，我的 Ajax 函数将被触发多次。
第一个 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();
}
});
}
});