AJAX load（）不會執行一次以上

將網站傳輸到服務器，現在我的JS文件似乎已半損壞。點擊圖片時，AJAX應該在郵件框中加載一個新頁面。但是，我不明白爲什麼它只執行一次，然後停止工作。一探究竟。AJAX load（）不會執行一次以上

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

將不勝感激幫助。謝謝。

來源

2014-02-06 user2464332

您確定這與點擊事件無關嗎？ –

假設每個控件都在'＃main'中，請使用[** Event Delegation **]（http://learn.jquery.com/events/event-delegation/） – Satpal

這可能是因爲您的負載正在從中刪除點擊事件該頁面，你認爲是這樣嗎？找出用alert（「Fired」）等替代你的負載;然後點擊，看看是否是這種情況。你也可以用「on」來代替。這裏是另一個問題的鏈接可能是相同的問題：http://stackoverflow.com/questions/11074261/jquery-click-event-stops-working-after-one-click – Severun

#main包含您點擊的圖像。當您重新加載#main時，會導致您在圖片上設置的處理程序出現問題。您應該將這些圖像移至單獨的div。

來源

2014-02-06 21:34:08 jwang

嘗試以下，當「主」重新加載它應該取代點擊事件：

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

來源

2014-02-06 21:41:59 Severun

它不會取代點擊事件，而是他們根本不會被刪除。 –

讓你的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));

並讓我知道;）

來源

2014-02-07 03:07:28

AJAX load（）不會執行一次以上

回答

相關問題