0

I am using two scripts on my website

  1. jQuery/Ajax to load the next three posts without reloading the page
  2. jQuery to open each post in an iFrame/modal dialog

The problem is: after clicking "load more posts", and then clicking on one of the first 3 posts, the post is open twice.

I need to find a way to remove the function superbox() for the previous placeholder and add it again for the new placeholder (otherwise the new posts just open in a normal window).

The website is http://gotoviproekti-och.com

    if(pageNum <= max) {
    // Insert the "More Posts" link.
    $('.content-middle')
        .append('<div class="pbd-alp-placeholder-'+ pageNum +'"></div>')            

        .append('<p id="pbd-alp-load-posts"><a href="#">Покажи още готови проекти</a></p>');

    $(function(){
        $.superbox();
        });
        //Single Page Carousel
        $(function() {
        $(".image").click(function() {
        var image = $(this).attr("rel");
        $('#image').hide();
        $('#image').fadeIn('slow');
        $('#image').html('<img src="' + image + '"/>');
        return false;
            });
        });
    }



/**
 * Load new posts when the link is clicked.
 */
$('#pbd-alp-load-posts a').click(function() {

    // Are there more posts to load?
    if(pageNum <= max) {

        // Show that we're working.
        $(this).text('Loading...');

        $('.pbd-alp-placeholder-'+ pageNum).load(nextLink + ' .pic',
            function() {
                // Update page number and nextLink.
                pageNum++;
                nextLink = nextLink.replace(/\/page\/[0-9]?/, '/page/'+ pageNum);

                // Add a new placeholder, for when user clicks again.
                $('.content-middle')
                .append('<div class="pbd-alp-placeholder-'+ pageNum +'"></div><div class="clearfloat"></div>')

                $.superbox.detach();

                $.superbox();


                // Update the button message.
                if(pageNum <= max) {
                    $('#pbd-alp-load-posts a').text('Load more posts');
            }
        );
    } else {
        $('#pbd-alp-load-posts a').append('.');
    }   

    return false;
});

});

1
  • Please indent your code properly. Commented May 7, 2012 at 15:28

1 Answer 1

1

Use $.on() and you only have to bind the event once.

$('#posts-container').on('click', '.post', doPostEvent);
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.