ImageButton not firing on the second time

Question

In my ASP.Net page I need to show an HTML div who contains : Images, Text, Arrows and Connectors.

What are my "Connectors" ? It's an ImageButton, and when the user click on this connector, the HTML div is showing a new content. This connectors are used to navigate in a TreeView.

But my problem is : I create all my connectors (and all the HTML div content) dynamically. When the user click on the first connector the HTML div is showing new content. But on this second content, when the user click on a connector : nothing. The Click event of the ImageButton is not fired.

This is my Connector creation (on PageLoad and then on each Connector Click) :

List<Connecteur> ListConnecteur = new List<Connecteur>();
        ListConnecteur = NomenclatureObj.SelectConnecteurs(DocId, ExterneData.RapidoBDDCnx);
        foreach (Connecteur CeConnecteur in ListConnecteur)
        {
            if (CeConnecteur.FK_docversion_suivant_id != 0)
            {
                ImageButton ImgBtnTmp = new ImageButton();
                ImgBtnTmp.Width = 30;
                ImgBtnTmp.Height = 30;
                ImgBtnTmp.ImageUrl = "~/images/GreenButton.png";
                ImgBtnTmp.Style.Add("left", CeConnecteur.position_x_pix.ToString() + "px");
                ImgBtnTmp.Style.Add("top", CeConnecteur.position_y_pix.ToString() + "px");
                ImgBtnTmp.Click += new ImageClickEventHandler(ImgBtnTmp_Click);
                ImgBtnTmp.CommandArgument = CeConnecteur.FK_docversion_suivant_id.ToString();
                ImgBtnTmp.Style.Add("position", "absolute");
                DivAffichage.Controls.Add(ImgBtnTmp);
                ImgBtnTmp.CausesValidation = true;
            }
        }

And this is my Connector OnClick :

public void ImgBtnTmp_Click(object sender, EventArgs e)
    {
        ImageButton ThisBtn = sender as ImageButton;
        string CommandArg = ThisBtn.CommandArgument;
        int DocId = Convert.ToInt32(CommandArg);

        TREEVIEW_NIVEAU++;

        //DocId of the clicked connector
        Session["DocId"] = DocId;
        ClearDiv();
        LoadDiv(DocId);
    }

EDIT 1 : My whole LoadDiv() function

public void LoadDiv(int DocId)
    {
        #region Connecteurs
        List<Connecteur> ListConnecteur = new List<Connecteur>();
        ListConnecteur = NomenclatureObj.SelectConnecteurs(DocId, ExterneData.RapidoBDDCnx);
        foreach (Connecteur CeConnecteur in ListConnecteur)
        {
            if (CeConnecteur.FK_docversion_suivant_id != 0)
            {
                ImageButton ImgBtnTmp = new ImageButton();
                ImgBtnTmp.Width = 30;
                ImgBtnTmp.Height = 30;
                ImgBtnTmp.ImageUrl = "~/images/GreenButton.png";
                ImgBtnTmp.Style.Add("left", CeConnecteur.position_x_pix.ToString() + "px");
                ImgBtnTmp.Style.Add("top", CeConnecteur.position_y_pix.ToString() + "px");
                ImgBtnTmp.Click += new ImageClickEventHandler(ImgBtnTmp_Click);
                ImgBtnTmp.CommandArgument = CeConnecteur.FK_docversion_suivant_id.ToString();
                ImgBtnTmp.Style.Add("position", "absolute");
                DivAffichage.Controls.Add(ImgBtnTmp);
            }
        }
        #endregion

        #region Textes
        List<Texte> ListTexte = new List<Texte>();
        ListTexte = NomenclatureObj.SelectTextes(DocId, LANGUE_ID, ExterneData.RapidoBDDCnx);
        foreach (Texte CeTexte in ListTexte)
        {
            Label LblText = new Label();
            LblText.Text = CeTexte.contenu;
            LblText.Width = CeTexte.largeur_voulue_pix;
            LblText.Style.Add("left", CeTexte.position_x_pix.ToString() + "px");
            LblText.Style.Add("top", CeTexte.position_y_pix.ToString() + "px");
            LblText.Style.Add("position", "absolute");
            DivAffichage.Controls.Add(LblText);
        }
        #endregion

        #region Images
        List<ImageNomenclature> ListImg = new List<ImageNomenclature>();
        ListImg = NomenclatureObj.SelectImages(DocId, ExterneData.RapidoBDDCnx);
        foreach (ImageNomenclature CetteImage in ListImg)
        {
            Image ImgTmp = new Image();
            ImgTmp.ImageUrl = "~/Nomenclature/RAPIDO/planches/" + CetteImage.fichier_chemin;
            ImgTmp.Width = CetteImage.largeur_voulue_pix;
            ImgTmp.Height = CetteImage.hauteur_voulue_pix;
            ImgTmp.Style.Add("left", CetteImage.position_x_pix.ToString() + "px");
            ImgTmp.Style.Add("top", CetteImage.position_y_pix.ToString() + "px");
            ImgTmp.Style.Add("position", "absolute");
            ImgTmp.Style.Add("z-index", "-1");
            DivAffichage.Controls.Add(ImgTmp);
        }
        #endregion

        #region Flèches
        List<Fleche> ListFleche = new List<Fleche>();
        ListFleche = NomenclatureObj.SelectFleches(DocId, LANGUE_ID, ExterneData.RapidoBDDCnx);
        foreach (Fleche CetteFleche in ListFleche)
        {
            string HTMLCode = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"800\" height=\"600\"><line x1=\"" + CetteFleche.position_x1_pix + "\" y1=\"" + CetteFleche.position_y1_pix + "\" x2=\"" + CetteFleche.position_x2_pix + "\" y2=\"" + CetteFleche.position_y2_pix + "\" stroke=\"#ff0000\"/></svg>";
            //DivAffichage.InnerHtml += HTMLCode;
        }
        #endregion
    }

Answer 1

You should create your dynamic control every time on Page_Init or Page_Load if you would like to handle events from them after Postback.

See links below for details:

• http://msdn.microsoft.com/en-us/library/y3bwdsh3%28v=vs.140%29.aspx
• http://msdn.microsoft.com/en-us/library/hbdfdyh7%28v=vs.100%29.aspx

Here you can see the same problem.

EDIT

Try to do something like this:

protected void Page_Load(object sender, EventArgs e)
{
    if (IsPostBack)
    {
        LoadDiv(Session["DocId"])
    }
}