0

皆さん、おはようございます。

まず第一に、私の英語でごめんなさい。これが私が抱えている問題です。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);
})

});

私はあなたのすべての助けに感謝します。ちなみに、どうもありがとうございました。

4

2 に答える 2

0

メソッドのセレクターとして更新しているセレクターを設定する必要がありますjQuery.fn.on：

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

参照：jQuery.fn.onと署名：を参照してください.on( events-map [, selector] [, data] )。

于 2012-11-30T15:31:45.277 に答える
0

バインドをコールバックするだけでよいと思います：

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()関数で作成された新しい要素です。

于 2012-11-30T18:31:51.317 に答える