使用的ThickBox

的Jquery Ajax響應所以我有一個Ajax調用服務（使用JQuery）返回的HTML標籤：使用的ThickBox

<table class='datagrid' style='width: 600px; text-align:left'> 
<tr><th>User</th><th>Full Name</th><th>Company</th><th>New Prints</th><th>Reprints</th></tr><tr> 
<td> 
<a class='thickbox' href='UserSessionReportPopup.aspx?user=1&start=9/2/2009&end=9/30/2009&TB_iframe=true&height=450&width=700'>carbon</a> 

</td><td>Carbon County</td> 
<td></td> 
<td>5</td> 
<td>4</td> 
</tr> 
</table>

這個返回的HTML被正確顯示指定的頁面上，但是當我點擊「a」標籤會打開一個新頁面，而不是帶有iFrame內容的「ThickBox」。

這裏的混亂的一部分，如果我這個代碼複製到頁面，然後在瀏覽器中運行它，它作用於正確的方式（顯示ThickBox的項目）

爲什麼不會Ajax響應正確顯示的ThickBox項目？

我的猜測是，響應文本中的class ='thickbox'未找到知道如何解析該項目的JavaScript。

來源

2009-09-15 John Maloney

我認爲問題是，這個<a class='thickbox'只是沒有綁定它的事件。

我有完全相同的問題，當我複製包含鏈接和所有綁定事件停止工作這些新創建的元素的現有dom元素。我所要做的就是將事件綁定到這些元素上。

所以，只要做你的thickbox調用這個新的元素。不要只使用$（document）.ready中使用的相同代碼。當我做了這樣的事情時，事件開始在新的元素上工作，但在舊元素上開了兩次。

編輯迴應評論：我不知道thickbox是如何工作的。我一直喜歡Slimbox。我找到了一些可以幫助你的例子。閱讀本（其約ThickBox的）：http://15daysofjquery.com/jquery-lightbox/19/

基本上，beeing加載頁面時，此功能火災：

function TB_init(){ 

    $("a.thickbox").click(function(){ 

    var t = this.title || this.innerHTML || this.href; 

    TB_show(t,this.href); 

    this.blur(); 

    return false; 

    });

現在所有帶類ThickBox的標籤將在ThickBox的窗口打開的東西鏈接指向。如果新的元素被添加到頁面中，他們沒有綁定這個事件，所以在完成ajax魔術並將新內容從某處拉出之後，您需要綁定$（「a.thickbox」）。click （函數（）{新的鏈接。所以只需添加類似

$(newlinkselector).click(function{ etc.. etc..

腳本，這個地方之後，你渲染的東西，Ajax調用還給你。

來源

2009-09-16 11:29:39

感謝您的回答，你能幫我解答這個問題嗎？不確定你的意思是「所以你只需要對你的thickbox調用這個新元素。」因爲厚盒子電話只存在於新的情況中，而沒有其他地方存在。我應該打外線電話嗎？我會如何在父頁面上註冊這個「class ='thickbox'？謝謝 – 2009-09-16 14:52:34

我有快速回答 - 在填充innerHTML後添加以下行： tb_init（'a.thickbox'）; //再次初始化

此重新啓用錨標記的事件處理程序。工作對我來說就像魅力。

來源

2009-10-09 01:34:30

你也可以把下面的Ajax響應中的腳本：

<script type="text/javascript"> 
    self.parent.tb_init('a.thickbox, area.thickbox, input.thickbox'); 
</script>

它將初始化每次粗框時，Ajax響應上來。

來源

2011-02-15 06:12:57 Hitendra

與以下替換tb_init（）：

function tb_init(domChunk){ 
    $(domChunk).live("click", function(){ 
    var t = this.title || this.name || null; 
    var a = this.href || this.alt; 
    var g = this.rel || false; 
    tb_show(t,a,g); 
    this.blur(); 
    return false; 
    }); 
}

此結合與考慮動態生成的內容一個jQuery方法現場點擊事件。

來源

2012-10-09 16:18:26 Raivo

回答

相關問題