トグルボタングリッドビューが機能しません。

Question

4つの状態から1つのボタンを切り替えるトグルボタンを作成しました。

トグルボタンはGridViewにあり、GridViewはFormView内にネストされています。ボタンはHTMLページでうまく機能し、4つの画像のそれぞれが選択されたときに必要に応じて値をテキストボックスに送信します。ただし、GridViewで動作しません！誰か助けてもらえますか、私が知っておくべき既知の問題はありますか？

<script type="text/javascript"> 
    $(document).ready(function() { 
    $(".imageButton").ready(function() { 
      $("img").click(function() { 
       if ($(this).attr("src") == "../../../images/tick_50.png") { 
        $(this).attr("src", '../../../images/excl_mark_50.png'); //orange image 
        $(this).parent().siblings("input").attr("value", '2'); 
       } else if ($(this).attr("src") == "../../../images/excl_mark_50.png") { 
        $(this).attr("src", '../../../images/cross_50.png'); //red image 
        $(this).parent().siblings("input").attr("value", '3'); 
       } else if ($(this).attr("src") == "../../../images/cross_50.png") { 
        $(this).attr("src", '../../../images/absent_50.png'); //blue image 
        $(this).parent().siblings("input").attr("value", '4'); 
       } else if ($(this).attr("src") == "../../../images/absent_50.png") { 
        $(this).attr("src", '../../../images/tick_50.png'); //green image 
        $(this).parent().siblings("input").attr("value", "1"); 
       } 
      }); 
    }); 

}); 
</script> 



<asp:FormView ID="FormView1" runat="server" DataSourceId="SqlDataSource1" 
       DataKeyNames="tt_id,s_id,n_id,o_id" AllowPaging="false"> 

    <ItemTemplate> 

        <br /> 

    <asp:UpdatePanel ID="UpdatePanel2" runat="server"> 
    <ContentTemplate> 
    <asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="False" 
     CssClass="rounded-corner" DataKeyNames="tt_id,s_id,n_id,o_id" 
      ShowFooter="True" > 
     <Columns> 



      <asp:TemplateField HeaderText="Results" SortExpression="outcome" HeaderStyle-Font-Bold="true" > 
       <EditItemTemplate > 
       <div class="imageButton"><a href="#"> <asp:Image ID="imgStatusEdit" runat="server" ImageURL='<%# GetImage(CType(Eval("o_id"),Integer)) %>' /></a> 
        <asp:TextBox ID="txtOutcome" runat="server"></asp:TextBox></div> 





       </EditItemTemplate> 
       <ItemTemplate> 
    <asp:Image ID="imgStatus" runat="server" ImageURL='<%# GetImage(CType(Eval("o_id"),Integer)) %>' /> 
        <%--<asp:Label ID="Label2" runat="server" Text='<%# Bind("o_id") %>'></asp:Label>--%> 

       </ItemTemplate> 
       <HeaderStyle Font-Bold="True" /> 
       <ItemStyle Width="67px" /> 
      </asp:TemplateField> 
      <asp:TemplateField HeaderText="Notes" SortExpression="notes" ItemStyle-Width="" HeaderStyle-Font-Bold="true"> 
       <EditItemTemplate> 
        <asp:TextBox ID="txtNotes" runat="server" TextMode="MultiLine" Text='<%#Eval("notes")%>'></asp:TextBox> 
       </EditItemTemplate> 
       <ItemTemplate> 
        <asp:Label ID="Label1" runat="server" Text='<%# Eval("notes")%>'></asp:Label> 
       </ItemTemplate> 
       <HeaderStyle Font-Bold="True" /> 
      </asp:TemplateField> 
      <asp:CommandField ButtonType="Link" UpdateText="Update" CancelText="Cancel" 
       EditText="Edit" ShowEditButton="True" /> 
     </Columns> 


    </asp:GridView>    
     </ContentTemplate> 
    </asp:UpdatePanel>    
      </ItemTemplate> 
</asp:FormView> 

Answer 1

$(document).ready(function() { 
      $('.imageButton').find('img').on('click', function() { 
       if ($(this).attr('src') == '../../../images/tick_50.png') { 
        $(this).attr('src', '../../../images/excl_mark_50.png'); //orange image 
        $(this).parents('.imageButton').find('input').val('2'); 
       } else if ($(this).attr('src') == '../../../images/excl_mark_50.png') { 
        $(this).attr('src', '../../../images/cross_50.png'); //red image 
        $(this).parents('.imageButton').find('input').val('3'); 
       } else if ($(this).attr('src') == '../../../images/cross_50.png') { 
        $(this).attr('src', '../../../images/absent_50.png'); //blue image 
        $(this).parents('.imageButton').find('input').val('4'); 
       } else if ($(this).attr('src') == '../../../images/absent_50.png') { 
        $(this).attr('src', '../../../images/tick_50.png'); //green image 
        $(this).parents('.imageButton').find('input').val('1'); 
       } 
      }); 
     });