AJAX load() 不执行多次答案

【问题标题】：AJAX load() not executing more than onceAJAX load() 不执行多次
【发布时间】：2014-02-06 21:26:07
【问题描述】：

将网站传输到服务器，现在我的 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 中使用Event Delegation
可能是您的负载正在从页面中移除点击事件，您认为是这样吗？要找出用 alert("Fired"); 之类的东西替换你的负载；然后单击并查看是否是这种情况。您也可以改用“on”。这是另一个可能是相同问题的问题的链接：stackoverflow.com/questions/11074261/…

标签： javascript jquery ajax wordpress load

【解决方案1】：

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

【讨论】：

【解决方案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));

【讨论】：

它不会替换点击事件，而是永远不会被删除。

【解决方案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));

让我知道；）

【讨论】：