Question

将网站转移到服务器，现在我的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));

非常感谢帮助。感谢。

Answer 1

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

Answer 2

尝试以下操作时，应该在重新加载“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));

Answer 3

制作你的HTML：

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

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

让我知道;）

AJAX load（）不会执行多次

3 个答案: