0

アンカー要素がクリックされたときにjQueryを使用してflexsliderギャラリーをロードしたいと思います。ギャラリーはdiv＃slider-loaderにロードされます

問題は、HTMLが正しくロードされていることですが、この場合は.on（）を使用することを読んだとしても、Javascriptは挿入された要素に影響を与えないようです。

$(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がそのコンテンツを表示するslideDownを開始しますが、変数として設定して.css（ ） 方法。それは数ピクセルスライドダウンし、その後突然.flexsliderの高さ全体になりました。

4

1 に答える 1

0

コールバック関数を使用して、ロードが完了したときにアクションを実行します

$(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;
});
于 2013-03-10T07:58:43.543 に答える