javascript – bpopup倍数

2019年8月4日 239次阅读

我正在使用一个名为’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>

他可能是对的(肯定的),但不知道如何实现这一点,或者这是否可能(他很可能是错的).

救命？谢谢！

最佳答案 由于您使用的是jquery,因此您应该使用它的
on() method将单个侦听器附加到父DOM元素,并使用selector参数将事件正确委派给它的子节点(按钮/弹出窗口).

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

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.

点赞