Question

大家早上好。

首先，对不起我的英语。这是我的问题。我尝试在div中设置ul列表的动画。但在ajax调用后它停止工作。我尝试使用已经弃用的.live()方法。我真的不知道如何解决这个问题。这是我正在使用的代码：

function comp_disposicion_contenidos (disposicion, area, seccion) {

var newDisposicion = eval(disposicion),
    newArea = area,
    newSeccion = seccion,
    allDispContent;

var appendDisp = function() {

    jQuery('.seccion').append("<div id='comp_disposicion_contenidos_vacio'></div>");

    var html = '<ul>';
    jQuery.each(newDisposicion, function(k,v){
        html += '<li class="" title="'+v+'">'+v+'%</li>';
    });
    html += '</ul>';

    jQuery('.jumichica_agregado').each(function() {

        jQuery(this).append("<div class='tabMenu'>"+html+"</div>");

    });
}

this.set_DispContentExists = function(allDispContent_) {
    //alert(allDispContent_);
    allDispContent = (allDispContent_);
    //alert(allDispContent);
}

var asignarTamano = function () {

}

this.setDispContent = function(id_agregado, valor){
    //this is the ajax call
    (new paginax()).cargar("libs/ejecutor.php",
        "comp_disposicion_contenidos_vacio", 
        "objeto=Comp_Disposicion_Contenidos&parametros=" +
        "&metodo=set_DispContent&parametros_metodo=" + id_agregado + ',' + valor +
        "&area=" + newArea +"&seccion=" + newSeccion, "POST");
}

appendDisp();
}


jQuery(document).ready(function() {

/*jQuery('.jumichica_agregado').hover(function() {
    console.log('entro');
        jQuery(this).addClass('jumichica_agregado_hover');
        jQuery(this).find("div.tabMenu").stop().animate({opacity: "show", top: "-35"}, "slow");
    }, function() {
    console.log('salio');
        jQuery(this).removeClass('jumichica_agregado_hover');
        jQuery(this).find("div.tabMenu").stop().animate({opacity: "hide", top: "-15"}, "fast")
    }
);*/

jQuery('.jumichica_agregado').on({
    mouseenter: function(e) {
        e.preventDefault();
        console.log('entro');
        jQuery(this).addClass('jumichica_agregado_hover');
        jQuery(this).find("div.tabMenu").stop().animate({opacity: "show", top: "-35"}, "slow");
    },
    mouseleave: function() {
        console.log('salio');
        jQuery(this).removeClass('jumichica_agregado_hover');
        jQuery(this).find("div.tabMenu").stop().animate({opacity: "hide", top: "-15"}, "fast")
    }
});


jQuery('.tabMenu').tabs();

jQuery('.tabMenu ul li').click(function() {
    var parentWidth = jQuery(this).closest('.seccion').width();
    var width_ = jQuery(this).attr("title");
    var percent = parseInt(width_*parentWidth/100);

    var agregado = jQuery(this).closest('.jumichica_agregado');
    agregado.width(percent +'px');

    var id = agregado.attr('id');
    id = id.split('_').pop();

    //manejador_js_comp_disposicion_contenidos. this variable has been declared in another html
    manejador_js_comp_disposicion_contenidos.setDispContent(id, percent);
})

});

感谢你的帮助。顺便说一下，非常感谢。

Answer 1

您必须在jQuery.fn.on方法中将要更新的选择器设置为选择器：

jQuery('.tabMenu').on({mouseenter: ... , mouseleave: ...}, '.jumichica_agregado');

请参阅参考资料：jQuery.fn.on，并附上签名：.on( events-map [, selector] [, data] )。

Answer 2

我认为你只需要回调绑定：

function bindEvents(within) {
    jQuery('.jumichica_agregado', within).on({
        mouseenter: function(e) {
            e.preventDefault();
            console.log('entro');
            jQuery(this).addClass('jumichica_agregado_hover');
            jQuery(this).find("div.tabMenu").stop().animate({opacity: "show", top: "-35"}, "slow");
        },
        mouseleave: function() {
            console.log('salio');
            jQuery(this).removeClass('jumichica_agregado_hover');
            jQuery(this).find("div.tabMenu").stop().animate({opacity: "hide", top: "-15"}, "fast")
        }
    });
}
bindEvents($(document)); //bind on load

关于你的负载成功，你可以这样称呼：

bindEvents(newlyCreatedElements); //bind on load

变量newlyCreatedElements是使用ajax $.load()函数创建的新元素

为什么我的.animate（）在ajax之后不起作用？

2 个答案: