切換按鈕在Gridview不工作？

Question

我創建了一個切換按鈕，通過4個狀態切換單個按鈕！

切換按鈕位於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'); 
       } 
      }); 
     });