fancybox jquery on templete gridviewバインディングの問題

Question

ここでは、C＃.netでWebサイトを作成しました。fancyboxのgridviewフィールドをクリックした後に開くページが必要です。 しかし、私はそれが最初の行だけのファンシーボックスのページを開くという1つの問題に直面しています。ここで

は私のコードです：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<script type="text/javascript" src="../fancybox/jquery.mousewheel-3.0.4.pack.js"></script> 
<script type="text/javascript" src="../fancybox/jquery.easing-1.3.pack.js"></script> 
<script type="text/javascript" src="../fancybox/jquery.fancybox-1.3.4.js"></script> 
<script type="text/javascript" src="../fancybox/jquery.fancybox-1.3.4.pack.js"></script> 
<link rel="stylesheet" type="text/css" href="../fancybox/jquery.fancybox-1.3.4.css" 
    media="screen" /> 
<script type="text/javascript" language="javascript"> 
    $(document).ready(function() { 

      $('#deal_VCU').fancybox({ 
       'width': '85%', 
       'height': '85%', 
       'autoScale': false, 
       'transitionIn': 'none', 
       'transitionOut': 'none', 
       'type': 'iframe', 
       'titleShow': false 
      }); 
     }); 
</script> 

<asp:GridView ID="GrdDeals" runat="server" AllowPaging="True" AllowSorting="True" 
    AutoGenerateColumns="False" CellPadding="1" DataKeyNames="OFID" DataSourceID="SqlDataSource3" 
    ForeColor="#333333" GridLines="None" PageSize="100" 
    onrowdatabound="GrdDeals_RowDataBound" onrowcommand="GrdDeals_RowCommand"> 
    <Columns> 
     <asp:BoundField DataField="OFID" HeaderText="Offer ID" SortExpression="OFID" /> 
     <asp:BoundField DataField="Text_Message" HeaderText="Offer Text" SortExpression="Text_Message" /> 

     <asp:TemplateField HeaderText="Deal for VCU" SortExpression="Counter1"> 
      <ItemTemplate> 
       <a id="deal_VCU" href="DetailView.aspx?ID=<%#Eval("OFID")%>&Op1=Counter2"> 
        <%#Eval("Counter2")%></a> 
      </ItemTemplate> 
     </asp:TemplateField> 
     <asp:TemplateField HeaderText="Deal for SCSU" SortExpression="Counter2"> 
      <ItemTemplate> 
       <a id="deal_SCSU" href="DetailView.aspx?ID=<%#Eval("OFID")%>&Op1=Counter2"> 
        <%#Eval("Counter2")%></a> 
      </ItemTemplate> 
     </asp:TemplateField> 
     <asp:TemplateField HeaderText="Deal for Trinity" SortExpression="Counter3"> 
      <ItemTemplate> 
       <a id="deal_Trinity" href="DetailView.aspx?ID=<%#Eval("OFID")%>&Op1=Counter3"> 
        <%#Eval("Counter3")%></a> 
      </ItemTemplate> 
     </asp:TemplateField> 
    </Columns> 
    <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" /> 
    <RowStyle BackColor="#EFF3FB" Height="4" /> 
    <EditRowStyle BackColor="#2461BF" /> 
    <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" /> 
    <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Right" /> 
    <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" /> 
    <AlternatingRowStyle BackColor="White" /> 
</asp:GridView> 

ここで私はfancyboxは最初の行のみのためにオープンになっている1つの問題に直面しています。

Answer 1

これは、同じIDを持つ複数のハイパーリンクコントロールがあるためです。 CSSクラス（たとえばdeal_VCUCSS）

<a id="deal_VCU" class="deal_VCUCSS" href="DetailView.aspx?ID=<%#Eval("OFID")%>&Op1=Counter2"> 
           <%#Eval("Counter2")%></a> 

を割り当てて、彼らはあなたが参照しているかの要素を知る必要があり仕事にjQueryのセレクタためには、以下の

$('.deal_VCUCSS').fancybox({ 

Answer 2

使用し、あなたのコードからしてくださいエラーがあります（W3Cに基づいて、DOM要素がアクセスしたい要素を知るためにIDをhtmlファイルで1回だけ使用する必要があります）。

イベントリスナーを持たせるには、前のコメントのようにクラスが必要です。または、リンクごとに異なるIDを使用する場合は、イベントリスナーをループしてすべてのユーザーに適用することができます。 $（ "＃main_div_container"）find（ "a"）各（function（）{ここのコード。 }）; 私はそれが助けてくれることを願っています。