Javascript AJAX load（）不执行多次

把一个网站转移到服务器上，现在我的JS文件似乎已经坏了一半。单击图片时，AJAX应该将新页面加载到邮箱中。然而，我不明白为什么它只执行一次，然后停止工作。看看吧

和JS文件：

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

非常感谢您的帮助。谢谢。

#main包含您正在单击的图像。重新加载#main时，会导致图像上设置的处理程序出现问题。您应该将这些图像移动到一个单独的分区。

尝试以下操作，当重新加载“main”时，它应该替换您的单击事件：

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

制作您的html：

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

---

让我知道；）

您确定这与单击事件无关吗？假设每个控件都在

#main

中，则可能是您的加载正在从页面中删除单击事件，您认为是这样吗？要找到答案，请用类似于“警告”（“已触发”）的内容替换负载；然后单击并查看是否是这种情况。你也可以用“开”来代替。这里有一个指向另一个问题的链接，该问题可能与此相同：它不会替换单击事件，而只是它们永远不会被删除。

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