Gridview TemplateField中的Lightbox

Question

<script type="text/javascript">
        $(document).ready(function () {
          $("#LightBox").click(function () {
                $.fancybox.open({
                    href: ($('#LightBox').val()),
                    type: 'iframe',
                    padding: 7
                });
            });
        });
    </script>

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
                        DataSourceID="SqlDataSource1" >
                        <Columns>
                         <asp:TemplateField>
                         <ItemTemplate>
                         <asp:Button   ID="LightBox" runat="server" Text="http://www.apple.com/ipod" />
                         </ItemTemplate>
                         </asp:TemplateField>
                        </Columns>
   </asp:GridView>

如果我把按钮放在网格视图之外，灯光盒就能正常工作.我不明白为什么它不会从templateField内部触发。

Answer 1

可以尝试使用下面的代码(使用类而不是ID)

<script type="text/javascript">
        $(document).ready(function () {
          $(".LightBox").click(function () {
                var url = $(this).val();
                $.fancybox.open({
                    href: url,
                    type: 'iframe',
                    padding: 7
                });
            });
        });
    </script>

    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
                        DataSourceID="SqlDataSource1" >
                        <Columns>
                         <asp:TemplateField>
                         <ItemTemplate>
                         <asp:Button   ID="LightBox" CssClass="LightBox" runat="server" Text="http://www.apple.com/ipod" />
                         </ItemTemplate>
                         </asp:TemplateField>
                        </Columns>
   </asp:GridView>