0

我正在使用 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>
4

1 回答 1

1

应用单击文档以及 .button 类的过滤器。建议使用on而不是Live已弃用。

现场演示

$(document).ready(function() {

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

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

        });            
    });

});​

根据有关原始帖子的评论中的讨论进行编辑。

jquerybpopup库用于创建弹出窗口。该库对 dom 进行更改并将弹出 div 从其位置移动，这会导致下一次弹出失败。这可以在这里看到

我已经更改了 html 和 javascript 来处理bpopup. 这可以在这里看到。进行这些更改是为了使其运行，并且可以根据要求进行调整。

现场演示

更新的 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({
                 });
        }
    });
});​
于 2012-08-06T16:21:02.793 回答