防止点击按钮多次追加内容

Question

嗨，我有一个代码来打开覆盖上的外部链接

    $('body').append('<div class="overlay-2"><div class="contentWrap"></div>  </div>');
    $("a.overlay-2[rel]").live('click', function () {
    $("a.overlay-2[rel]").overlay({
        mask: '#333',
        onBeforeLoad: function() {
            var wrap = this.getOverlay().find(".contentWrap");
            wrap.load(this.getTrigger().attr("href"));
        }
    }).load();

    $(this).overlay().load();       
    return false;
}); 

这将附加div overlay-contato

第一次单击链接会打开一切正常，但每次我关闭覆盖并再次单击时，代码都会多次将div附加到body。

按钮代码为

    <a href="/php/my-page.php"  class="overlay-2" rel=".overlay-contato">click </a>

Answer 1

只需检查一下，看看您可能要附加的div是否首先存在。

// note i added an id to the overlay to simplify and improve selector performance
var overlay = $('#overlay');

if(overlay.length < 1) {
  overlay = $('<div id="overlay" class="overlay-2"><div class="contentWrap"></div></div>').appendTo('body');
}

// now you can also use overlay as a variable instead of querying it from the DOM

Answer 2

您应该在click处理程序外部初始化overlay。每次单击时，都会创建叠加的新实例，而您所要做的只是显示它