bpopup plugin opnes popup only once

Question

bpopup plugin opnes popup only once

4.2k Views Asked by user915308 At 04 April 2025 at 12:27

I'm using the jquery bpopup plugin. I'd like to use the same script for all buttons/popups on a page. Unfortunately each button click only works once after page load. I would be very thankful for you help!

<!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>

Original Q&A

There are 1 best solutions below

**Adil** · Accepted Answer

Apply click on document along with filter of your .button class. It is recommended to use on instead of Live is deprecated.

Live Demo

$(document).ready(function() {

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

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

        });            
    });

});

Edit as per discussion in comments about origninal post.

The jquery bpopup library is used for creating popup. The library makes changes in dom and move the popup div from its place which causes the next time popup failure. This could be seen here

I have changed the html and javascript to handle the dom change made by bpopup. This could be seen here. These changes are made to make it run and could be adjusted according to requirements.

Live Demo

Updated 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>

Updated 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 plugin opnes popup only once

There are 1 best solutions below

Related Questions in JQUERY

Related Questions in JQUERY-CLICK-EVENT

Related Questions in BPOPUP

Trending Questions

Popular # Hahtags

Popular Questions