CODEWITHSUNDEEP
jquery
Alvaro
Alvaro

Reputation: 101

Prevent click button to append content multiple times

Hi i have a code to open a external link on overlay

    $('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;
});

This append the div overlay-contato

the first click on link open everything normal, but each time i close the overlay and click again the code is append the div to body multiple times.

the button code is

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

Upvotes: 0

Views: 1615

Answers (2)

charlietfl
charlietfl

Reputation: 171690

You should initialize the overlay outside of the click handler. Each time you click you are creating a new instance of the overlay when all you want to do is display it

Upvotes: 1

prodigitalson
prodigitalson

Reputation: 60413

Just do a check to see if the div you are potentially going to append exists first.

// 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

Upvotes: 1

Related Questions