GridViewのクラス属性がボタンのクリック後に機能しない

Question

GridViewで行の情報を編集できます。だからあなたは行をクリックすることができます。そして、このポップアップは何かを変えることができるボックスをアップし、そして保存をクリックします。 しかし、保存ボタンをクリックして別の行をクリックしようとすると、ポップアップボックスはもう表示されません。私はフォームから完全にクローズし、次に戻って行をクリックしなければなりません。保存ボタンをクリックしなければ正常に動作します。私は行をクリックし、ポップアップボックスを閉じて別の行をクリックします。この問題は、保存ボタンがクリックされた後にのみ発生します。

のGridView：背後に

<asp:UpdatePanel ID="updOBSAddress" UpdateMode="Conditional" runat="server" > 
           <ContentTemplate> 
           <asp:GridView runat="server" GridLines="None" ID="GVAddresses" OnRowDataBound="GVAddresses_RowDataBound" AutoGenerateColumns="false" CssClass="tblStatus" AllowSorting="false" >      
            <Columns> 
             <asp:TemplateField HeaderText="Code"> 
              <ItemTemplate><%# Eval("AccountCode") %></ItemTemplate> 
             </asp:TemplateField> 
             <asp:TemplateField HeaderText="Name"> 
              <ItemTemplate><%# Eval("Name") %></ItemTemplate> 
             </asp:TemplateField> 
            </Columns> 
           </asp:GridView> 
          </ContentTemplate> 
        <Triggers> 
         <asp:AsyncPostBackTrigger ControlID="btnUpdateOBSAddress" /> 
        </Triggers> 
       </asp:UpdatePanel> 

コード：

protected void GVAddresses_RowDataBound(object sender, GridViewRowEventArgs e) 
{ 
    if (e.Row.RowType == DataControlRowType.DataRow) 
    { 
     GridView gv = sender as GridView; 
     DataRowView drv = e.Row.DataItem as DataRowView; 
     //e.Row.Cells[0].Attributes.Add("onclick", "event.stopPropagation();"); 

     if (drv != null) 
     { 
      e.Row.Attributes.Add("class", "GVAddressesRow"); 
      e.Row.Attributes.Add("ID", "GVAddressesRow_" + drv["ID"].ToString()); 
      e.Row.ToolTip = "Click here to Edit Address"; 
     } 
    } 
} 

はボタン：JavaScriptで

protected void btnUpdateOBSAddress_Click(object sender, EventArgs e) 
    { 

    } 

クラスがクリックされたときに、それがポップアップ表示されますが、このdoesnの必要がありますボタンをクリックするともう呼び出されません。

$(".GVAddressesRow").click(function (e) { 
      ShowAddOBSAddress(this, e.pageX, e.pageY, "Edit"); 
      EditOBSAddress($(this).attr("ID")); 
     }); 

Answer 1

問題はUpdatePanelです。 GridViewはAjaxを使ってリフレッシュされますが、ユーザーにポストバックは表示されませんが、DOMは変更されており、以前のバインディングは$(".GVAddressesRow").clickで失われます。そのため、UpdatePanelの更新後に再度実行する必要があります。

これにはPageRequestManagerを使用できます。

<script type="text/javascript"> 
    $(document).ready(function() { 
     bindPopup(); 
    }); 

    var prm = Sys.WebForms.PageRequestManager.getInstance(); 

    prm.add_endRequest(function() { 
     bindPopup(); 
    }); 

    function bindPopup() { 
     $(".GVAddressesRow").click(function (e) { 
      ShowAddOBSAddress(this, e.pageX, e.pageY, "Edit"); 
      EditOBSAddress($(this).attr("ID")); 
     }); 
    } 
</script> 

Answer 2

それはあなたがこのようなGridViewのすべての行にクリックハンドラを追加したので、最初の時間を動作します：$(".GVAddressesRow").click。しかし、保存ボタンをクリックすると、新しいhtml（行）がサーバーから返されます。これらの新しい行にハンドラーを追加していないので、それらは機能しません。

clickの代わりにjquery onを使用すると問題を解決できます。 Jquery onは動的に作成されたhtml要素で動作します。詳細はthis answerをご覧ください。

// Bind to all items with class GVAddressesRow inside 
// #whatever element, even new ones created later. 
$('#whatever').on('click', '.GVAddressesRow', function() { 
    /* your code here */ 
});