2013-06-21 48 views
0

我使用$ .ajax({})和外部php腳本創建了一個用於更新和處理數據的Javascript對象。調用對象時從對象返回的表元素包含一些隱藏的tr(使用「hidden」類,它被設置爲display:none)。JQuery處理程序無法訪問Ajax函數後的數據

這裏是在對象內部的顯示功能:

this.displayData = function(location_div) { 
    var location_div = location_div; 
    $.ajax({ 
      url:"display_data.php", 
      type: "POST", 
      success:function(response){ 
       $(location_div).html(response); 
       }, 
      error:function(response){alert("Error Displaying Problems." + response)}, 
     }); 
    }; 

,其顯示:

<div id="location_div"> 
    <table> 
     <tbody> 
      <tr class="hidden"></tr> 
      <tr class="hidden"></tr> 
      <tr class="hidden"></tr> 
      <tr class="hidden"></tr> 
     </tbody> 
    <table> 
</div> 

(注: 「#location_div」 是傳遞的元素爲 「displayData(location_div)」)

我遇到的問題是當JQuery試圖訪問返回的數據。我有一個函數可以查找所有的tr,將它們分別推入一個數組,然後逐個淡入每一個數組。

var elements_array = new Array(); 
$("#location_div table tbody").children().each(function() { 
    elements_array.push(this); 
}); 
//function for fading in each element in the array 
fadeAllIn(elements_array); 

據我所知,是Ajax的加載元件不是DOM的一部分,因此人們需要使用JQuery的功能,諸如$(元件)。在();或$(element).live();然而,我沒有試過的東西已經奏效。該表正在加載,但JQuery似乎無法使用.each()選擇每個tr,因爲該表是Ajax加載的。

有沒有人知道這個解決方案/解決方法?有沒有比使用JQuery淡入表中的每個tr更好的解決方案?

+0

你可以用你的代碼製作一個[pastebin](http://pastebin.com/)。我想看看什麼是什麼聲明什麼時候。 –

+0

你在哪裏調用這個方法..看起來你是在數據被填充爲「Ajax is Asyn'之前調用方法 –

+0

如果你要爲你的」數組推動器「創建一個函數,然後稱之爲成功從你的ajax函數回調? 編輯:剛纔看到@ face的回答基本上是這樣做的。 – Spencer

回答

2

我想你只需要在加載動態數據後綁定你的事件/動畫。

this.displayData = function(location_div) { 
var location_div = location_div; 
$.ajax({ 
     url:"display_data.php", 
     type: "POST", 
     success:function(response){ 
      $(location_div).html(response); 
      bind_events();     
     }, 
     error:function(response){alert("Error Displaying Problems." + response)}, 
    }); 
}; 

var bind_events = function(){ 
    var elements_array = new Array(); 
      $("#location_div table tbody").children().each(function() { 
       elements_array.push(this); 
      }); 
      fadeAllIn(elements_array); 
}; 
+0

感謝您的建議,但是我試圖保留創建該數組的代碼和淡化對象外部的元素,這樣我就可以儘可能保持對象的一般性,並在需要時將其用於不同的目的。有沒有辦法做到這一點,沒有數組代碼,並在displayData函數內淡入代碼? – PatKeav412

+0

哦!我已經在評論中提到了這一點。只需存儲數組代碼,並將代碼部分淡入單獨的函數中,並在此處調用此函數。我會嘗試更新我的示例以獲得更多清晰度 – face

+0

嗯,很抱歉,沒有在您的答案中看到代碼部分。道歉!因此,如果我將數組/淡入代碼放入函數中,我是否可以從該對象的外部調用該函數?我應該將該函數放在DisplayData()函數之後,還是可以將它放在對象之外並仍然可以調用它? – PatKeav412

2

這聽起來像你需要通過.on方法使用委託。使用javascript/jquery淡化元素需要做的事情是將事件處理程序附加到頁面加載時位於頁面上的元素。

如:

$("location_div").on("click", "table tbody", function() { [function] }); 

或類似的東西,其中 「點擊」 是你的事件。

+0

他沒有任何'。在他的代碼中單擊()'處理程序。 – musicnothing

+0

我意識到,我只是想盡可能簡單地說明事件代表團。我認爲問題在於他綁定了DOM中尚未完全存在的選擇器。 – Spencer

+0

這是真的,但它看起來不像OP綁定任何東西,只是選擇一些元素來推入數組。見@臉的答案。 – musicnothing

相關問題