javascript - bpopup 多个

Question

我正在使用一个名为“bPopup”的轻量级 jQuery 弹出式插件。我现在在我的网站上使用它来在单击时加载多个弹出窗口。我最近被告知我的代码效率低下，因为我使用多个 JavaScript“监听器”加载多个弹出窗口，即:

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

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

^^ 多个 JavaScript“监听器”。并且，对于弹出窗口:

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


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

他可能是对的(确信)，但不确定如何实现，或者这是否可能(他错的可能性很小)。

帮助？谢谢!

Answer 1

因为您使用的是 jquery，所以您应该使用它的 on() method将单个监听器附加到父 DOM 元素，并使用选择器参数将事件正确地委托(delegate)给它的子元素(按钮/弹出窗口)。

如果这听起来令人困惑，一个简单的例子可能会有所帮助:

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

这会在父元素上添加一个事件监听器，只有在触发事件的子元素与选择器匹配时才会触发该事件监听器(在本例中为 a.button)。它通过从 href 属性中检索弹出窗口的 ID 来确定要显示的弹出窗口。

You can see this example working here.