1

ajaxを使用して、自分のサイトの1つ全体にコンテンツをロードする関数があります。

これはすべてうまく機能しますが、一部の部分では、クリック機能をライブクリック機能にするために必要なリンクが多い新しいコンテンツが導入されるためですが、ajaxを実行すると、ajaxが機能しなくなり、ページが通常どおりに変更されます（ajaxなし）。

これが私のコードです

function ajaxLoads(){

    var $btn = $('a.ajax-btn');
    var $container = $('#load');
    var siteTitle = document.title;
    //var $artistBG = $('#artist-viewport img');

    $btn.click(function(e){

        console.log();

        e.preventDefault();
        $btn.removeClass('selected');
        //$artistBG.removeClass('top');

        var sourceTarget = $(this).data('page'),
        slideWidth = $container.width(),
        $this = $(this),
        $background = $this.data('background'),
        pageUrl=$this.attr('href'),
        pageTitle = $this.html();
        //$changeTo = $("#artist-viewport img[data-background='"+ $background +"']");

        $this.addClass('selected');
        //$changeTo.addClass('top');
        $container.animate({'right':-slideWidth}, 300, 'easeInExpo');

        $container.load(pageUrl+" "+sourceTarget, function(){

            subNav();   

            $("html, body").animate({ scrollTop: 0 }, 500, 'easeInExpo', function(){
                $container.animate({'right':0}, 300, 'easeInExpo');
            });         

            var pageContent = $(this).html();

            window.history.pushState({"html":pageContent, "pageTitle": pageTitle},"", pageUrl);
            //document.title=pageTitle+" :: "+siteTitle;

        }); // end load function    

    }); // end click function   

    window.onpopstate = function(e){
        if(e.state){
            $container.css('opacity', 0).html(e.state.html).fadeTo('fast', 1);
            document.title=e.state.pageTitle+" :: "+siteTitle;
        }
    };  

}

私は変更してみました$btn.click(function(e) to $btn.live('click', function(e) and to $btn.on('click', function(e)

4

3 に答える 3

2

ドキュメントを追加.onします。

$(document).on('click','a.ajax-btn',function(){   });
于 2013-03-25T06:56:39.260 に答える
1

試すon

 $('#load').on('click', '.ajax-btn', function(){
     ...
 });

liveはjquery1.8で非推奨になり、1.9で削除されました。on()

于 2013-03-25T06:52:33.260 に答える
1

ボタンにcssクラスを与えて、これを使用します

$(document).on("click",".yourcssclass",function(e){});

デフォルトでは、ほとんどのイベントが元のイベントターゲットからドキュメント要素にバブルアップするため、これは機能します。これによりパフォーマンスは低下しますが、クリックイベントはまれにしか発生しないため、問題の修正として使用できます。時間があれば、試してみてください。ページサイクルを注意深く調べて、デリゲートの使用が機能しない理由を確認してください。

于 2013-03-25T06:55:12.267 に答える