如何在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>