asp.net - Gridview TemplateField 内的灯箱

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>

如果我将按钮放在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>