在一個GridView中使用JQuery無法找到動態asp：控件

Question

在一個ASP.Net應用程序中我有一個aspx文件，裏面有一個更新面板，裏面有一個Gridview。在Gridview裏面有一張桌子，裏面還有一些面板。這些面板內有一些控件。

ASPX

<asp:Gridview ID="GridView1" runat = "server"...> 
<Columns> 
    <asp:TemplateField ShowHeader="False"> 
    <ItemTemplate> 
    <table> 
     <asp:Panel ID="pnlVisualAst" runat="server" Visible="false"> 
       <tr> 
       <td style="text-indent: 50px; width: 25%"> 
        <asp:Label ID="lblVisAst" runat="server" Text="Visual Assitance"></asp:Label> 
       </td> 
       <td colspan="3"> 
        <asp:Button ID="btnVisAst" class="button" runat="server" Text="View"/> 
        <asp:Image ID="popImg" ImageUrl='<%# GetImage(Eval("VA_Img"))%>' runat="server" Visible="false" /> 
       </td> 
       </tr> 
     </asp:Panel> 
    </table> 
    </ItemTemplate> 
    </asp:TemplateField > 
</Columns> 
</asp:Gridview> 

現在，我寫一個jQuery函數來捕獲爲GridView裏面的按鈕的Click事件，並顯示在彈出窗口的像場。

JQuery的

<script type="text/javascript"> 

    $(document).on('ready', function() 
    { 
     var prm = Sys.WebForms.PageRequestManager.getInstance(); 
     prm.add_endRequest(function() 
     { 
      $('#<%=GridView1.ClientID%>').find($('#<%= btnVisAst.ClientID %>')).click(function() 
      { 
       $('#<%=popImg.ClientID%>').dialog 
        ({ 
         title: "my jquery popup", 
         width: 430, 
         height: 200, 
         modal: true, 
         button: 
          { 
           Close: 
           function() 
           { 
            $(this).dialog('Close'); 
           } 
          } 
        }); 
       $(this).prop('checked', true); 

      }); 
     }); 

    }); 

與上述代碼的問題是它不能找到的GridView內的動態控制。它顯示'btnVisAst'和'popImg'在當前上下文中不存在。

有什麼辦法可以解決這個問題嗎？ 謝謝。

Answer 1

我同意ConnorsFan。改用類。如果應用類您的光臨按鈕，說：「classVisAst」，那麼你可以做這樣的事情：

$('.classVisAst').click(function() 
     { 
      var newDialog = $(this).siblings("img").dialog 
       ({ 
        title: "my jquery popup", 
        width: 430, 
        height: 200, 
        modal: true, 
        button: 
         { 
          Close: 
          function() 
          { 
           $(this).dialog('Close'); 
          } 
         } 
       }); 
      $(newDialog).dialog('open'); 

      $(this).prop('checked', true); 

     }); 

那麼你有沒有，因爲在所有事情都是相對的擔心標識。

Answer 2

而不是搜索按鈕分配給它的功能。

<asp:Gridview ID="GridView1" runat = "server"...> 
<Columns> 
    <asp:TemplateField ShowHeader="False"> 
    <ItemTemplate> 
     <asp:Panel ID="pnlVisualAst" runat="server" Visible="false"> 
    <table><%--put table inside panel else you will have empty table element --%> 
       <tr> 
       <td style="text-indent: 50px; width: 25%"> 
        <asp:Label ID="lblVisAst" runat="server" Text="Visual Assitance"></asp:Label> 
       </td> 
       <td colspan="3"> 
        <asp:Button ID="btnVisAst" OnClientClick="return doSomething(this)" class="button" runat="server" Text="View"/> 
        <asp:Image ID="popImg" ImageUrl='<%# GetImage(Eval("VA_Img"))%>' runat="server" Visible="false" /> 
       </td> 
       </tr> 
    </table> 
     </asp:Panel> 
    </ItemTemplate> 
    </asp:TemplateField > 
</Columns> 
</asp:Gridview> 

的javascript：

function doSomething(elem){//elem == input[type=submit] 
    $('#'+ elem.id.replace('btnVisAst','popImg')).dialog 
     ({ 
      title: "my jquery popup", 
      width: 430, 
      height: 200, 
      modal: true, 
      button: 
       { 
        Close: 
        function() 
        { 
         $(this).dialog('Close'); 
        } 
       } 
     }); 
    $(elem).prop('checked', true); 
    return false; 
}