如何在jquery中只執行一次動作？

Question

我一直在使用這個腳本來顯示我的網站上的模態彈出窗口，裏面有一些QR碼，它可以在單個頁面上工作，但是在多次調用的類別頁面上，因爲它顯示了10次同一個窗口。我怎樣才能限制它在最近的ancor位置只顯示一次？

代碼：

<li class="qrcode"> 
    <a class="popup-trigger"></a> 

    </li> 
</ul> 
<div class="contain-popup"> 

<div class="popup"> 
my qr code 
    <span class="popup-btn-close">X</span> 
</div> 
</div> 
<script> 
// Popup Window 
var scrollTop = '10'; 
var newHeight = '100'; 

$(window).bind('scroll', function() { 
    scrollTop = $(window).scrollTop(); 
    newHeight = scrollTop + 100; 
}); 

$('.popup-trigger').click(function(e) { 
    e.stopPropagation(); 
    if(jQuery(window).width() < 767) { 
    $(this).after($(".popup")); 
    $('.popup').show().addClass('popup-mobile').css('top', 0); 

    } else { 
    $('.popup').removeClass('popup-mobile').css('top', newHeight).toggle(); 
    }; 
}); 

$('html').click(function() { 
    $('.popup').hide(); 
}); 

$('.popup-btn-close').click(function(e){ 
    $('.popup').hide(); 
}); 

$('.popup').click(function(e){ 
    e.stopPropagation(); 
}); 
</script> 

Answer 1

解決方案是非常簡單的，我不知道我怎麼錯過了它：

jQuery(document).ready(function($){ 
    $('.popup-trigger').click(function(){ 
    $(this).closest('.caption').find('.popup'); 
    }); 
}) 

Answer 2

一個簡單的方法去實現它是remove()它的HTML與同時隱藏它：

$('html').click(function() { 
    $('.popup').hide(); 
    $('.popup').remove(); 
}); 

Answer 3

而是隱藏（中），取出類分配給它。 $（'。popup'）。remove（）;

Answer 4

// Popup Window 
 
var scrollTop = '10'; 
 
var newHeight = '100'; 
 

 
$(window).bind('scroll', function() { 
 
    scrollTop = $(window).scrollTop(); 
 
    newHeight = scrollTop + 100; 
 
}); 
 

 
$('.popup-trigger').click(function(e) { 
 
    e.stopPropagation(); 
 
    if(jQuery(window).width() < 767) { 
 
    $(this).after($(".popup")); 
 
    $('.popup').show().addClass('popup-mobile').css('top', 0); 
 

 
    } else { 
 
    $('.popup').removeClass('popup-mobile').css('top', newHeight).toggle(); 
 
    }; 
 
}); 
 

 
$('html').click(function() { 
 
    $('.popup').hide(); 
 
    $('.popup').remove(); 
 
}); 
 

 
$('.popup-btn-close').click(function(e){ 
 
    $('.popup').hide(); 
 
}); 
 

 
$('.popup').click(function(e){ 
 
    e.stopPropagation(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<li class="qrcode"> 
 
    <a class="popup-trigger"></a> 
 

 
    </li> 
 
</ul> 
 
<div class="contain-popup"> 
 

 
<div class="popup"> 
 
my qr code 
 
    <span class="popup-btn-close">X</span> 
 
</div> 
 
</div>