jQuery-使用Ajax加载内容后使用javascript

Question

单击锚元素时，我想用jQuery加载flexslider画廊。 画廊应在div＃slider-loader中加载

问题是HTML加载正确，但是Javascript似乎不会影响注入的元素，即使我读到在这种情况下我将使用.on（）。

$(document).on('click', '.cliccami' , function() {
        var href = $(this).attr('href');
        $('#slider-loader').load(href);
        return false;
});

先感谢您！

-

使用回调函数在加载完成后执行操作，如下所示

甜！ 有效！ 尽管使用这种解决方案，.on（）事件变得毫无用处。 现在我想出了这个，它的工作原理是：

$('.cliccami').click(function() {
    var href = $(this).attr('href');
    var gallery_height = $('.flexslider').css('height');
    $('#slider-loader').hide().fadeIn('slow', 'swing').load(href , function(){
        $('.flexslider').flexslider({
            animation: "slide"
        });

    })
    return false;
});

唯一的问题是代码的注入非常分散。 我想使div容器'＃slider-loader'根据'.flexslider'的高度通过平滑的动画调整其高度。

我试图做的是：

$(document).ready(function(){
    $('#slider-loader').hide();
});


$(document).on( 'click', '.cliccami', function() {

    var href = $(this).attr('href');
    var gallery_height = $('.flex-viewport').css('height');

    $('#slider-loader').load(href , function(){
        $('.flexslider').flexslider({
                animation: "slide"
        });
        $('#slider-loader').css('height' , gallery_height);
        $('#slider-loader').slideDown(10000);
    });
    return false;
});

问题是，一旦我单击锚元素，＃slider-container开始滑动显示其内容，但它并没有对整个.flexslider高度起作用（我将其设置为变量，并通过.css给他） ） 方法。 它向下滑动几个像素，然后突然变成整个.flexslider高度。

Answer 1

使用回调函数在加载完成后执行操作，如下所示

$(document).on('click', '.cliccami' , function() {
        var href = $(this).attr('href');
        $('#slider-loader').load(href , function(){
                                  // some thing to happen when loading is done
                                });
        return false;
});