ThickBoxを使用したJquery Ajax応答

StackOverflow https://stackoverflow.com/questions/1430027

  •  07-07-2019
  •  | 
  •  

質問

つまり、有効なhtmlを返すサービス（JQueryを使用）へのajax呼び出しがあります：

<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は正しく割り当てられ、ページに表示されますが、<！> quot; a <！> quot; <！> quot; ThickBox <！> quotの代わりに新しいページを開くタグを付けます。 iFrameコンテンツを使用します。

このコードをページにコピーしてからブラウザーで実行すると、正しい方法（thickboxアイテムを表示）で動作する場合、混乱する部分があります

AJAX応答がThickBoxアイテムを正しく表示しないのはなぜですか？

私の推測では、応答テキストのclass = 'thickbox'は、その項目を解析する方法を知っているjavascriptを見つけていません。

役に立ちましたか？

解決

問題は、この<a class='thickbox'にはイベントがバインドされていないだけだと思います。

リンクを含む既存のdom要素をコピーし、バインドされたすべてのイベントがそれらの新しく作成された要素で機能しなくなったとき、まったく同じ問題がありました。私がしなければならなかったのは、それらの要素にもイベントをバインドすることだけでした。

したがって、この新しい要素へのthickbox呼び出しも行ってください。 $（document）.readyで使用するのと同じコードを使用しないでください。そのようなことをしたとき、イベントは新しい要素で動作し始めましたが、古い要素で2回発生しました。

コメントに応じて編集： thickboxの仕組みがわかりません。私はいつもスリムボックスを好んでいました。私はあなたを助けることができるいくつかの例を見つけました。 READ this（そのthickboxについて）： http://15daysofjquery.com/jquery-lightbox/19/

基本的に、ページがロードされると、この関数が起動します：

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ウィンドウ内のスタッフリンクポイントを開きます。新しいa要素がページに追加された場合、これらの要素にはこのイベントがバインドされていないため、ajaxマジックを実行して新しいコンテンツをどこかから引き出した後、その$（<！> quot; a.thickboxをバインドする必要があります<！> quot;）。click（function（）{を新しいリンクに追加します。次のように追加します

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

スクリプト内で、ajax呼び出しが返すものをレンダリングする場所の直後。

他のヒント

ajaxレスポンス内に次のスクリプトを配置することもできます：

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

ajax応答が発生するたびにシックボックスを初期化します。

同じ問題がありました。簡単な答え-innerHTMLを入力した後、次の行を追加します。 tb_init（ 'a.thickbox'）; //再度初期化

これにより、アンカータグのイベントハンドラが再初期化されます。私にとって魅力のように働いた...

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メソッドがライブでクリックイベントにバインドされます。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top