Question

I have a <div> dynamically created and I am trying to put in a FadeIn FadeOut effect. However, when the PostBack occurs, these Jquery effects stop working. When the page is loaded, everything works fine, but if a postback occurs, they stop.

Creating DIV Dynamically

protected string CarregaLista()
{
    int credenciada_Id = Convert.ToInt32(tk.CarregaToken(1, Request.Cookies["token"].Value));
    int celula_Id = Convert.ToInt32(tk.CarregaToken(21, Request.Cookies["token"].Value));

    string select = "My Select";

    SqlConnection c = new SqlConnection(con.Con);
    SqlCommand cmd = new SqlCommand(select, c);
    c.Open();

    try
    {
        SqlDataReader r = cmd.ExecuteReader();
        montaTabela += "<ul id='sortable' class='" + cont + "' style='margin: 0 15px 15px !important; width: 637px !important;'>";

        while (r.Read())
        {   
            montaTabela += "<li class='ui-state-default linhaImovel' style='color:#777 !important;' id='" + r["Imovel_Id"].ToString() + "'>";                    
            montaTabela += "<span class='ui-icon ui-icon-arrowthick-2-n-s'></span>";

            montaTabela += "<div class='btn btn-mini btn-netimoveis botaoExcluir' style='float: right !important;' id='excluirDestaque_" + r["Imovel_id"].ToString() + "' OnClick='excluirDestaque(" + r["Imovel_Id"].ToString() + ")'><i class='icon-trash icon-white'></i>Excluir</div>";

            montaTabela += "<table>"; 
            montaTabela += "    <tr>"; 
            montaTabela += "        <td>";
            montaTabela += "            <img src='" + url + "' width='110' height='81' />"; 
            montaTabela += "        </td>";
            montaTabela += "        <td style='padding-left: 20px !important; padding-right: 20px !important; width: 111px !important;'>COD: " + r["Imovel_Id"].ToString() + "<br />" + r["TipoDsc1"].ToString();
            montaTabela += "        </td>";
            montaTabela += "        <td style='border-left: 1px dotted #CCC; padding-left: 20px !important; padding-right: 20px !important; width: 111px !important;'>" + r["BairroDsc1"].ToString(); 
            montaTabela += "        </td>";
            montaTabela += "        <td style='border-left: 1px dotted #CCC; padding-left: 20px !important; padding-right: 20px !important; width: 111px !important;'>R$ " + r["ValorImovel"].ToString(); 
            montaTabela += "        </td>";
            montaTabela += "        <td>";
            montaTabela += "            <span class='badge badge-warning'></span>";
            montaTabela += "        </td>";
            montaTabela += "    </tr>";
            montaTabela += "</table>";                    
            montaTabela += "</li>"; 
        }

        montaTabela += "</ul>";
        return montaTabela;
    }
    catch (Exception e)
    {
        return montaTabela;
    }
}

Trying to put the Effect via JQuery

$(function () {            
            $(".linhaImovel").mouseenter(function () {
                $(this).find(".botaoExcluir").fadeIn();
            }).mouseleave(function () {
                $(this).find(".botaoExcluir").fadeOut();
           });
});

Answer 1

If you replace the elements the event handlers are no longer bound to the new ones (because they’re completely new, separate elements), even if they match the criteria when you originally executed the code to bind them. You’ll need to use event delegation:

$(document).on({
     mouseenter: function(e) {
         $(this).find(".botaoExcluir").fadeIn();
     },
     mouseleave: function(e) {
         $(this).find(".botaoExcluir").fadeOut();
     }
}, '.linhaImovel');