Inside AspパネルからJQueryウィンドウを起動します

Question

ユーザがclass iframeでリンクをクリックするたびにFancyBoxウィンドウを開くために私のページに次のコードがあります。

$.noConflict(); 
$(document).ready(function() { 



    $("a.fancybox").fancybox({ 
     'width': '75%', 
     'height': '75%', 
     'autoScale': false, 
     'transitionIn': 'elastic', 
     'transitionOut': 'elastic', 
     'type': 'iframe' 
    }); 


}); 

私の問題は、リンクがaspパネル内にネストされている場合、これが機能しないことです。私はここに答えを実装しようとしましたRebinding events in jQuery after Ajax update (updatepanel)。その結果、パネルコンテンツが変更されるまでFancyBoxが正しく起動します。

関連があるかどうかわかりませんが、aspパネルの内容は、RadGridの行選択が変更されるたびにajaxを使用してリフレッシュされるDataListです。 FancyBoxを呼び出すリンクは、最初はDataList itemtemplateの内側にあり、DataListの外側に移動しましたが、まだaspパネルの内側にあります。私はそれがaspパネルの中にとどまっているので、JQueryが応答するための適切なイベントを見つけようとしています。

また、RadGrid RowClickイベントに応答する関数の中にJQueryをネストしようとしました。それはどちらもうまくいかなかった。

次はどうすればよいですか？

EDIT 以下の回答に基づいて、これを達成する素晴らしい方法があります。だから、潜在的に猫をスキンニングする別の方法があります。パネルの中にハイパーリンクを使用する代わりに、私はそのページにある既存のツールバーにボタンを追加することができます。 NavigateURLを動的に設定し、それを新しいウィンドウで開くツールバーからJavaScript関数を起動しています。以下にその関数の例を示します。最初のIFステートメントは、現在どのようにURLを設定し、RadWindowで起動しているかを示しています。 2番目のIFステートメントは、FancyBoxを起動して関連するURLを開くことができると思っています。おそらく、これは私の元の質問で提起されたアヤックスの問題を回避するでしょう。誰もこの仕事をする方法を知っていますか？ JavascriptからFancyBoxを開くことはできますか？

function click_handler(sender, args) { 

    var button = args.get_item(); 
    buttontext = button.get_text(); 
     if (buttontext == "Request Return") { 
      //This is an example that uses a RadWindow instead of FancyBox 
      var mastertable = $find("<%=RadGrid1.ClientID %>").get_masterTableView(); 
      var PackageID = mastertable.get_dataItems()[0].getDataKeyValue("PackageID"); 

      var oManager = GetRadWindowManager(); 
      oManager.open("Return.aspx?ID=" + PackageID, "RadWindow1"); 
      return false; 
      } 
if (buttontext == "Open My Fancy Box") { 
//do something here to a dynamic URL in FancyBox 
} 

Answer 1

これは悲しいことに痛みです。ここでの問題は、$ .fancybox呼び出しが行われた後にコントロールを追加することです。これがクリックイベントだった場合、私はちょうど使用するでしょう：

$("selector").live('click', function() {... 

明らかにここでそれを行うことはできません。だから私はそれを見る方法は2つあります：

1. コンテンツが読み込まれた後にファンシーボックスを再バインドします。これはまさにあなたが言及した投稿でやろうとしていたことです（http://stackoverflow.com/questions/301473/rebinding-events-in-jquery-after-ajax-update-updatepanel）あなたは確かですかargs.get_isPartialLoad（ ）が本当に戻ってくるのか？そのコードは実行されていますか？

2. 上記の方法がうまくいかない場合は、もっと厄介な解決策（私が使用する方法）があります。私はfancyboxソースを開き、ライブバインディングを使用するように変更します。アイデアは、DOM内の現在のオブジェクトにバインドする代わりに.fancyboxを呼び出すと、追加される可能性のある新しいオブジェクトにバインドするということです。これを行う例を次に示します：http://code.google.com/p/fancybox/issues/detail?id=18#c15。これは危険であり、実際には推奨されていないことに注意してください。fancyboxをアップグレードする場合は、変更を行うことを忘れないでください。

Answer 2

ここではうまくいくソリューションです。基本的には、FancyBoxの開始をトリガーしたいクリックイベントにJavascriptをアタッチするだけで簡単です。次に、以下の手動呼び出しを含めます。あなたがイベントを取り付けるための `ライブ（）`メソッドを利用するために必要があるよう

$.fancybox(
    '<h2>Hi!</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mi eu elit tempor facilisis id et neque</p>', 
//you could also put an iframe tag or any other html of your choosing above 
    { 
      'autoDimensions' : false, 
     'width'     : 350, 
     'height'    : 'auto', 
     'transitionIn'  : 'none', 
     'transitionOut'  : 'none' 
    } 
); 

答えは下に位置していた「ヒント&トリックを、＃6」http://fancybox.net/blog