Question

我动态创建了<div>，我试图加入FadeIn FadeOut效果。但是，当发生PostBack时，这些Jquery效果会停止工作。当页面加载时，一切正常，但如果发生回发，它们就会停止。

动态创建DIV

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;
    }
}

尝试通过JQuery实现效果

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

Answer 1

如果替换元素，事件处理程序不再绑定到新元素（因为它们是全新的，单独的元素），即使它们最初执行代码绑定它们时符合条件。您需要使用event delegation：

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

发生PostBack时，特定的JQuery效果停止工作

1 个答案: