重新打开 Fancybox 会导致我的自定义 Ajax 函数多次调用答案

【问题标题】：Re-opening Fancybox causes my custom Ajax function to call multiple times重新打开 Fancybox 会导致我的自定义 Ajax 函数多次调用
【发布时间】：2013-05-07 08:26:28
【问题描述】：

我在 Fancybox 中使用输入字段和列表来搜索和获取客户端，并带有 2 个自定义 Ajax 函数。

一切正常，但是当重新打开同一个 Fancybox 时，我的 Ajax 函数会被触发多次。

第一个 ajax 函数：searchClient()，检索新的客户端列表
第二个 ajax 函数：selectClient()，获取客户端信息并关闭花式盒子

有没有办法重置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();
            }
        });
    }
});

【问题讨论】：

你使用的是 FB 版本 1 还是 2？
@megaSteve4 版本 2。但我自己修复了它。查看我的更新。
@jlmmns 如果问题已解决，请添加答案（您可以在 2 天后接受） - 它会阻止问题出现在未回答列表中
@Pete 感谢您引起我的注意！ :)

标签： jquery ajax fancybox fancybox-2

【解决方案1】：

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

【讨论】：