Using multiple popup windows with bPopup I'm using a lightweight jQuery popup plugin called 'bPopup'. I'm using it on my website at the moment to load multiple popup windows when clicked. I was recently told that my code was inefficient as I was loading multiple popups with multiple JavaScript 'listeners':

&lt;script type="text/javascript"&gt;
;(function($) {
$(function() {
    $('#my-button_1').bind('click', function(e) {
        e.preventDefault();
        $('#element_to_pop_up_32754925023').bPopup();
    });
});
})(jQuery);
&lt;/script&gt;

&lt;script type="text/javascript"&gt;
;(function($) {
$(function() {
    $('#my-button_2').bind('click', function(e) {
        e.preventDefault();
        $('#element_to_pop_up_95031153149').bPopup();
    });
});
})(jQuery);


^^ The multiple JavaScript 'listeners'. And, for the Popups:

&lt;!-- Button that triggers the popup --&gt;
&lt;a class="main" id="my-button_1" href="#"&gt;Popup 1&lt;/a&gt;&lt;/b&gt;&lt;br /&gt;
&lt;!-- Element to pop up --&gt;
&lt;div id="element_to_pop_up_1"&gt;
// ...
&lt;/div&gt;


&lt;!-- Button that triggers the popup --&gt;
&lt;a class="main" id="my-button_1" href="#"&gt;Popup 1&lt;/a&gt;&lt;/b&gt;&lt;br /&gt;
&lt;!-- Element to pop up --&gt;
&lt;div id="element_to_pop_up_1"&gt;
// ...
&lt;/div&gt;


He's probably right (sure of it), but not sure how to implement this, or whether this is even possible (small chance he's wrong).
He is right.  Think about maintenance.  

If you wanted to add another link that popped up another element you would need to add yet another listener function.  Removing one would be the same thing.  Too many things to keep track of.

Change the code to add the event according to a class name and then you can bind to all at once.  Then include the popup element ID within the attributes of the opener link.

$('.popup-opener').bind('click', function(e) {
    e.preventDefault();
    $($(this).attr('popup-element')).bPopup();
});

&lt;!-- Button that triggers the popup --&gt;
&lt;a class="main popup-opener" popup-element="element_to_pop_up_1" id="my-button_1" href="#"&gt;Popup 1&lt;/a&gt;&lt;/b&gt;&lt;br /&gt;
&lt;!-- Element to pop up --&gt;
&lt;div id="element_to_pop_up_1"&gt;
// ...
&lt;/div&gt;


Better yet, use the on() function to bind the event.  http://api.jquery.com/on/

Adding new openers now requires no changes to the javascript.