AJAX load() not executing more than once

Question

Transferred a website to server and now my JS file seems half-broken. When pictures are clicked AJAX is supposed to load a new page into the post box. However, I can't figure out why it only executes once and then stops working. Check it out.

http://affinity-cap.com/services/

and the JS file:

(function($) {
    $("#wealthpic").click(function(){
    $("#main").load("http://affinity-cap.com/wealth-management/ .post-box");
    })
    $("#portpic").click(function(){
    $("#main").load("http://affinity-cap.com/portfolio-management/ .post-box");
    })
     $("#retirepic").click(function(){
    $("#main").load("http://affinity-cap.com/retirement-consulting/  .post-box");
    })
    $(".service-pic").click(function(){
    $(".post-box").animate({
    opacity: 0.1
    }, 1500);
    })
}(jQuery));

Would appreciate help. Thanks.

Answer 1

#main contains the images you are clicking on. When you reload #main, it's going to cause issues with the handlers you set on the images. You should move those images to a separate div.

Answer 2

Try the following, it should replace your click events when "main" is reloaded:

(function($) {
    $("#main").on("click", "#wealthpic", function(){
        $("#main").load("http://affinity-cap.com/wealth-management/ .post-box");
    })
    $("#main").on("click", "#portpic", function(){
        $("#main").load("http://affinity-cap.com/portfolio-management/ .post-box");
    })
    $("#main").on("click","#retirepic", function(){
        $("#main").load("http://affinity-cap.com/retirement-consulting/  .post-box");
    })
    $(".service-pic").click(function(){
    $(".post-box").animate({
    opacity: 0.1
    }, 1500);
   })
}(jQuery));

Answer 3

make your html:

<div id="wealthpic" tail="wealth-management"></div>
<div id="portpic" tail="portfolio-management"></div>
<div id="retirepic" tail="retirement-consulting"></div>

and jquery:

(function($) {

    /*define variables for repeatable use, if needed elsewhere*/
    var url = 'http://affinity-cap.com/',

        main = $('#main'),

        wealthPic = $('#wealthpic'),
        portPic = $('#portpic'),
        retirePic = $('#retirepic'),

        postBoxTxt = ' .post-box',
        postBox = $(postBox),

        animationSpeed = 1500;

    /*main action*/
    wealthPic.add(portPic).add(retirePic).click(function() {
        //get html element tail attribute
        var clickedElementTail = $(this).attr('tail');

        //fade postBox out
        postBox.stop().fadeTo(animationSpeed/2, 0.1, function() {
            //change postBox content
            main.load(url+clickedElementTail+postBoxTxt, function() {
                //fade postBox in
                postBox.fadeTo(animationSpeed/2, 1);
            });
        });

    });
}(jQuery));

and let me know ;)