bpopup plugin opnes popup only once

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>

Adil · Accepted Answer · 2012-08-07T15:19:36.307

1

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({
                 });
        }
    });
});

edited Aug 07 '12 at 15:19

answered Aug 06 '12 at 16:21

Adil

146,340
25
209
204

Put some alert in click or debug the click event to assure if it is fired. Also updated my code try this too. – Adil Aug 06 '12 at 17:24
there's a typo (`ducument` in place of `document`). This can be the reason, its not working – Jashwant Aug 06 '12 at 17:26
sorry, but the script doesn't execute. I added an alert and it seems it's not fired.... – user915308 Aug 06 '12 at 17:51
i used my inital script again and added an alert. the script is fired every time i click the button, but for some reason the popup only appears once... $(document).ready(function() { $('.button').on('click', function(e) { // Prevents the default action to be triggered. e.preventDefault(); // Alert alert('clicked') // Triggering bPopup when click event is fired $(this).find('.popup').bPopup({ }); }); }); – user915308 Aug 06 '12 at 17:52
There was typing mistake in my code, I typed ducument instead of document make sure you have latest code – Adil Aug 06 '12 at 17:55
Please check it over there, http://jsfiddle.net/rajaadil/nUdnc/ and take updated answer – Adil Aug 06 '12 at 18:29
thanks, i checked and added the bpopup plugin to the script... when clicking the same button more than once the popup doesn't appear anymore http://jsfiddle.net/nUdnc/1/ – user915308 Aug 06 '12 at 18:41
I have updated my answer, the cause of problem was the bpopup js library, I have made some changes to make it run. You can adjust as per your requirements. – Adil Aug 07 '12 at 15:21

bpopup plugin opnes popup only once

1 Answers1