토글 버튼 Gridview에서 작동하지 않습니까?

Question

4 개의 상태를 통해 하나의 버튼을 토글하는 토글 버튼을 만들었습니다!

토글 버튼은 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'); 
       } 
      }); 
     });