bpopup plugin opnes popup only once

StackOverflow https://stackoverflow.com/questions/11832097

Question

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>
Was it helpful?

Solution

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({
                 });
        }
    });
});​
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top