Question

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

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

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

1 个答案: