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