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

Question

我正在使用Fancybox内部的输入字段和列表来搜索和获取客户信息，使用了两个自定义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();
            }
        });
    }
});

- jlmmns

---

你正在使用 FB 版本 1 还是 2？ - megaSteve4

@megaSteve4 版本2。但我自己修好了。请看我的更新。 - jlmmns

@jlmmns 如果问题已经解决，请添加一个答案（您可以在2天后接受它）- 这将停止该问题出现在未回答列表中。 - Pete

@Pete 谢谢你提醒我！ :) - jlmmns

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

- jlmmns