如果多次单击超链接，则 Fancybox 内容会重复

Question

我正在为 SilverStripe 网站构建一个 fancybox 弹出窗口，虽然一切都快完成了，但仍有一个问题需要解决。如果用户多次单击超链接，则 fancybox 弹出 id 中的内容会重复。我指的不是在弹出窗口加载之前简单地点击太多次——我指的是弹出窗口加载、关闭然后再次打开的时间。

这是我为 fancybox 弹出窗口设置的内容：

var $= jQuery.noConflict();

(function($) {
    $(document).ready(function(){
        $("a#Wait-Times-Click").fancybox({
            'href'   : '#Wait-Times-Modal',
            'titleShow'  : false,
            'transitionIn'  : 'elastic',
            'transitionOut' : 'elastic',
            'beforeShow' : function(){
                $.ajax({
                    url: '/home/services/support-services/immediate-care/getWaitTimes',
                    context: this,
                    dataType: "json"
                }).done(function(data) {
                    $( "#Wait_Times" ).append("<strong>" + data[0].Name + ": </strong>" + data[0].WaitTime + "<br>");
                    $( "#Wait_Times" ).append("<strong>" + data[1].Name + ": </strong>" + data[1].WaitTime + "<br>");
                    $( "#Wait_Times" ).append("<strong>" + data[2].Name + ": </strong>" + data[2].WaitTime + "<br>");

                    $( "#Wait_Times_Alt" ).append("<strong>" + data[3].Name + " ER: </strong>" + data[3].WaitTime + "<br>");
                });
            },
            afterClose: function () {
                alert("you have closed fancybox");
            }
        });
    });
}(jQuery));

这是弹出窗口的 html 内容：

<div style="display:none;">
    <div id="Wait-Times-Modal">
        <h3>Wait Times</h3>
        <p>Primary area wait times:</p>
        <p id="Wait_Times"></p>

        <p>Wait times for other areas:</p>
        <p id="Wait_Times_Alt"></p>
    </div>
</div>

用于打开弹出窗口的超链接位于其中一个网站页面上的富文本编辑器中（这是所请求的）。

我猜想在 afterClose 中，我需要以某种方式清除弹出窗口的内容，以便在多次单击超链接时它不会重复。但由于它不是一种形式，我认为我不能只调用 reset()。有没有其他方法可以在关闭时 clear/reset 弹出窗口中的内容？

Answer 1

在您的 afterClose 函数中（假设该函数在您需要时触发），您应该能够做到：

$("#Wait_Times").html("");

这只是将元素的 html 设置为空字符串。你可以为#Wait_Times_Alt

做同样的事情

如果多次单击超链接，则 Fancybox 内容会重复

Fancybox content duplicated if hyperlinked clicked more than once

html

jquery

popup

fancybox-2