Since you are using jquery, you should use it's on() method to attach a single listener to the parent DOM element, and use the selector parameter to properly delegate the event to it's children (the button/popups).
If this sounds confusing, a simple example might help:
HTML:
<div id="parent">
<a href="popup1" class="button">Show popup 1</a>
<div id="popup1" class="popup">1</div>
<a href="popup2" class="button">Show popup 2</a>
<div id="popup2" class="popup">2</div>
<a href="popup3" class="button">Show popup 3</a>
<div id="popup3" class="popup">3</div>
<a href="http://www.google.com/" target="_blank">Non-popup link</a>
</div>
JS:
$('#parent').on('click', 'a.button', function (event) {
event.stopPropagation();
event.preventDefault();
var popup = $(this).attr('href');
$('#'+popup).bPopup();
});
This adds a single event listener on the parent element, which only gets triggered if the child element which triggered the event matches the selector (in this case a.button
). It determines which popup to show by retreiving the popup's id from the href
attribute.