2012-03-09 40 views
1

我有jQuery和/或jQuery UI的對話框一個非常惱人的問題。jQuery的負載重複成倍

點擊一個特殊的鏈接後一個模式對話框會彈出一些加載內容(AJAX),這加載的內容裏面都是新的鏈接/按鈕,加載同一div盒子裏面的網址,所以仍然被加載的對話框中,但隨着新的內容。問題是,如果您鏈​​接到該鏈接(在新加載的對話框和最近重新加載的網站中),它的工作原理應該如此,但第二次單擊它會加載兩次URL,第三次加載4次。它會隨着對話框中加載的每個新鏈接呈指數級增長。我使用存儲在$ _SESSION中的計數器對此進行了測試。

這是JavaScript代碼:

var somedialog = $('<div></div>').dialog({ 
    autoOpen: false, 
    resizable: false, 
    modal: true, 
    /*show: 'fade', 
    hide: 'puff',*/ 
    closeOnEscape: true, 
    close: function(){ 
    } 
}); 
function openInDialog(url, title, width, height) 
{ 
    somedialog.empty(); 
    somedialog.dialog("option", "width", width); 
    somedialog.dialog("option", "height", height); 
    somedialog.dialog("option", "title", title); 
    somedialog.load(url,{},function (responseText, textStatus, XMLHttpRequest) 
    { 
    somedialog.dialog('open'); 
    } 
); 

    //somedialog.load(url,{},function (responseText, textStatus, XMLHttpRequest){ 
    // dialogdiv.somedialog('open'); 
    //}); 
} 

$('a.ajaxBuyItemDialog').on('click',function(){ 
    openInDialog(this.href, this.title, 400, 300); 
    //prevent the browser to follow the link 
    return false; 
}); 

好像有蜜蜂其他人有這個問題,但是,這不是一個很有效的討論:https://stackoverflow.com/questions/6471360/jquery-load-after-load-repeated-results-problem

感謝您的幫助!

編輯: 這是位於加載腳本代碼的一部分:

$("#_BUYITEM_FORM").live('submit', function(){ 
    $.ajax({ // create an AJAX call... 
     data: $(this).serialize(), // get the form data 
     type: $(this).attr('method'), // GET or POST 
     url: $(this).attr('action'), // the file to call 
     success: function(response){ // on success.. 
      $("#_BUYITEM_CONTENT").html('<p class="AjaxLoaderImg"><span>Einen Moment bitte...</span></p>'); 
      $("#_BUYITEM_CONTENT").html(response); // update the DIV 
     } 
    }); 
    return false; // cancel original event to prevent form submitting 
}); 

沒有它,我不能讓它刷新新內容的對話框。

+0

是這個代碼的網址要裝入不止一次? – charlietfl 2012-03-09 02:33:26

+0

編輯的主要問題 – Maddis 2012-03-13 16:31:09

回答

0

「髒」的解決方案

function watchBuyItemForm(){ 
     $("#_BUYITEM_FORM").submit(function(){ 
      $.ajax({ // create an AJAX call... 
       data: $(this).serialize(), // get the form data 
       type: $(this).attr('method'), // GET or POST 
       url: $(this).attr('action'), // the file to call 
       success: function(response){ // on success.. 
        somedialog.html(ajaxLoader); 
        somedialog.html(response); // update the DIV 
        watchBuyItemForm(); 
       } 
      }); 
      return false; // cancel original event to prevent form submitting 
     }); 
    } 
1

看來,您的JavaScript代碼被複制在每個$('a.ajaxBuyItemDialog')目標頁面點擊。在每次點擊時再次將該腳本添加到對話框中會導致不止一次觸發事件。

+0

編輯的主要問題 – Maddis 2012-03-13 16:31:19

0

如果您重新加載腳本多次,它會添加一個新的提交處理程序,因爲您使用的是live()。

live()會將處理程序委託給文檔,因此應該只調用一次,或者在每次腳本加載之前都需要調用die()。

如果你擺脫使用活的(),你可以移動提交處理負載的成功回調(),並使用提交(),而不是生活()。如果原來的形式被替換...原來提交()事件處理程序也將消失

+0

但問題是,如果我們再次需要一個形式,它不會工作... – Maddis 2012-03-13 20:26:46

+0

當您使用委託方法,如活的()處理程序委派匹配也是未來元素。如果你改變'$(「#_ BUYITEM_FORM」)。submit(function(){'只要你正在替換完整的表單,你的問題就會停止 – charlietfl 2012-03-13 21:01:59

+0

實際上不確定代碼在哪裏運行..它可能不是提交,如果你是continuaously加載的標籤,點擊處理程序將是一個問題也 – charlietfl 2012-03-13 21:07:07