通过jQuery slideToggle显示div并通过updatepanel中的隐藏按钮运行服务器代码后，div单击不起作用

Question

I am using jquery slideToggle to show/hide div

I call a button click event to run server code when the div opened

The div should be in an updatepanel- to avoid full postback in page

javascript:

$(document).ready(
 function () {
     $(".header").click(function () {
         var $header = $(this),
    $span = $header.find(">:first-child"),
         //getting the next element
    $content = $header.next();
         //open up the content needed
         $content.slideToggle(500);
         if (this.id == "ContentPlaceHolder1_AAA_divheader") {
             document.getElementById('<%= btnPostback.ClientID %>').click();
         }

     });
 });



 <asp:UpdatePanel ID="up1" runat="server" UpdateMode="Conditional">
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="btnPostback" EventName="Click" />
    </Triggers>
    <ContentTemplate>
        <div id="divheader" runat="server" class="header">
            <span class="ProName">
                <asp:Label ID="Label8" Text="<i class='fa fa-plus-square fa-lg'></i>" runat="server"></asp:Label>
                <asp:Label ID="Label9" runat="server">Title</asp:Label>
            </span>
        </div>
        <div id="divcontent" runat="server" class="content">
 <asp:Button runat="server" ID="btnPostback" Style="display: none" OnClick="LoadData" />        
            <div id="divIfA" runat="server">
            </div>
            <div id="divifB" runat="server">
            </div>               
        </div>
    </ContentTemplate>
    </asp:UpdatePanel>

c#:

  public void LoadData(object sender, EventArgs e)
{
    if (Session["IfOpen"] == null)
        Session["IfOpen"] = "1";
    else
        if (Session["IfOpen"].ToString() == "1")
            Session["IfOpen"] = "0";
        else
            Session["IfOpen"] = "1";


    if (ID > 0 && Session["IfOpen"].ToString() == "1")       
    {
       //run my code to create user control in the divIfA/divIfB
    }
    if (Session["IfOpen"].ToString() == "1")
    {
        //The (partial) postback closed the div so I open It again
        ScriptManager.RegisterStartupScript(up1, up1.GetType(), "MyFunction", " $('#ContentPlaceHolder1_AAA_divcontent').slideToggle(500);", true);
    }

}

the problem:

When running this code , the div opened in the first click, and then the click event doesn't fire at all (also the content of the div become not clickable)

So I tried with the btnPostback click, without the updatepanel, and everything worked well (but with page refresh)

I tried with UpdatePanel , without calling btnPostback Click , the div show/hide normally (of course without the data from server)

I need the UpdatePanel and the server code also. Does anyone have an idea why is it happening?

Answer 1

<asp:UpdatePanel ID="up1" runat="server" UpdateMode="conditional">
            <ContentTemplate>
                <div id="divheader" runat="server" class="header" onclick="headerClick(this);">
                    <span class="ProName">
                        <asp:Label ID="Label8" Text="<i class='fa fa-plus-square fa-lg'></i>" runat="server"></asp:Label>
                        <asp:Label ID="Label9" runat="server">Title</asp:Label>
                    </span>
                </div>
                <div id="divcontent" runat="server" class="content">
                        <asp:Button runat="server" ID="btnPostback"  CssClass="hidden-btn" OnClick="LoadData" />
                    <div id="divIfA" runat="server">
                    </div>
                    <div id="divifB" runat="server">
                    </div>
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>

Javascript :

function headerClick(obj)
        {
     var $header =$(obj).val();
    $span = $header.find(">:first-child"),
         //getting the next element
    $content = $header.next();
         //open up the content needed
         $content.slideToggle(500);
         if (obj.id == "ContentPlaceHolder1_AAA_divheader") {
             document.getElementById('<%= btnPostback.ClientID %>').click();
         }
}

Here I had added onClick method to Div just replace and try,it's working at my end.