Question

我正在使用jquery bpopup插件。我想对页面上的所有按钮/弹出窗口使用相同的脚本。不幸的是，每次按钮点击仅在页面加载后运行一次我非常感谢你的帮助！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script src="http://dinbror.dk/downloads/jquery.bpopup-0.7.0.min.js" type="text/javascript"></script>

    <script language="javascript" type="text/javascript">
    $(document).ready(function() {  
        $('.button').live('click', function(e) { 

            // Prevents the default action to be triggered. 
            e.preventDefault();

            // Triggering bPopup when click event is fired
            $(this).find('.popup').bPopup({

            });

        });

    });
    </script>

    </head>
    <body>
        <!-- Button 1 -->
        <div class="button">Button1
        <div class="popup" style="background-color:#fff; width:400px; height:400px; display:none">
            PopUp Content1
            </div>
        </div>

                <!-- Button 2 -->
        <div class="button">Button2
            <div class="popup" style="background-color:#fff; width:400px; height:400px; display:none">
            PopUp Content2
            </div>
        </div>

    </body>
    </html>

Answer 1

点击文档以及.button类的过滤器。建议不要使用on而不是Live。

<强> Live Demo

$(document).ready(function() {

    $(document).on('click', '.button', function(e) { 
        e.preventDefault();

        // Triggering bPopup when click event is fired
        $(this).find('.popup').bPopup({

        });            
    });

});

根据关于origninal post的评论中的讨论进行编辑。

jquery bpopup库用于创建弹出窗口。库在dom中进行更改并将弹出div从其位置移动，这会导致下一次弹出失败。这可以看作here

我更改了html和javascript来处理bpopup所做的dom更改。可以看到 here 。这些更改是为了使其运行并可根据要求进行调整。

<强> Live Demo

更新了HTML

    <!-- Button 1 -->
    <div id="button1" class="button">Button1</div>
       <div class="popup" style="background-color:#fff; width:400px; height:400px; display:non">
        PopUp Content1
        </div>
    <!-- Button 2 -->
    <div id="button2" class="button">Button2</div>
    <div  class="popup" style="background-color:#fff; width:400px; height:400px; display:none;">
        PopUp Content2
    </div>

更新了Javascript

$(document).ready(function() {

    $(document).on('click', '.button', function(e) {
        e.preventDefault();

        if ($(this).next('.popup').length == 1) {
            $(this).next('.popup').attr('attachedbutton', $(this).attr('id'));
            $(this).next('.popup').bPopup({
            });
        }
        else {
                $('body').parent().find("'.popup[attachedbutton=" + this.id + "]'").bPopup({
                 });
        }
    });
});

bpopup插件opnes只弹出一次

1 个答案: