jquery - 重新打开 Fancybox 导致我的自定义 Ajax 函数调用多次

Question

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

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

• 第一个 ajax 函数:searchClient()，检索新的客户端列表

• 第二个ajax函数:selectClient()，获取客户端信息并关闭Fancybox

有没有办法重置 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

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