1

ajax (ajax html コンテンツ ローダー) を使用して html コンテンツをロードできるカスタム スクリプトを作成します。このスクリプトは、要素のクリックで開始されます。

このスクリプトは、クリック時にハードコードされた要素で正常に動作します。

ただし、私のhtmlでは、クリックのおかげで多くの要素を追加しています。

この新しく追加された要素は、私の ajax HTML コンテンツ ローダーを介してコンテンツを読み込むことができません。

新しく追加された要素で動作させるには、ajax スクリプトをコールバックする必要があります。

コールバックを可能にするスクリプトの書き方がわかりません。

ここに私のスクリプト：

$(function ajax() {
    function ajaxify(file) {
        $.get(file, function (data) {

            var folderContent = $("#bottom-container");
            $("#prev-ajax").fadeOut(0);
            $("#next-ajax").fadeOut(0);
            folderContent.slideToggle(1000,"easeOutCirc", function () {;
            $("#loading-bloc").show();
            $("#loading-text").fadeIn(500);
            $("#ajaxify_container").hide( function () {

            $("#loading-bloc").everyTime(10, function(){                        
            $("#loading-bloc").animate({left:"100%"}, 1000).animate({left:"0%"}, 1000); 
            });
            $("#ajaxify_container").show( function () {         
            folderContent.slideToggle(1000,"easeOutCirc");
            $("#loading-bloc").hide();
            $("#loading-text").fadeOut(500);
            $("#prev-ajax").fadeIn(300);
            $("#next-ajax").fadeIn(300);
           });
        });
    });
    });
}


$('.link:not("#prev-ajax,#next-ajax")').on("click",function (e) {
    e.preventDefault();

    var functionAlink = $(this);
    var functionBlink = $(this);

    var $parent= functionAlink.parents('.element'); 

    var prev = $parent.prev().find('.link').attr('href');
    var next = $parent.next().find('.link').attr('href');
    if (typeof prev != 'undefined' ) {
        $("#prev-ajax").attr('href', prev); 
        $("#prev-ajax").animate({opacity: 1}, 300);
    }else {
        $("#prev-ajax").removeAttr("href");
        $("#prev-ajax").animate({opacity: 0.4}, 300);
    }
    if (typeof next != 'undefined' ) {
            $("#next-ajax").attr('href', next);
        $("#next-ajax").animate({opacity: 1}, 300);
    }else {
        $("#next-ajax").removeAttr("href");
        $("#next-ajax").animate({opacity: 0.4}, 300);
    }   


    var link = functionBlink;
    if (!link.hasClass('current')) {
        $('.link').removeClass('current');
        link.addClass('current');
        ajaxify(link.attr('href'));
        window.location.hash = link.attr("href");
    }

    return false;   
});

$("#prev-ajax,#next-ajax").on("click",function (e) {
    e.preventDefault();
    var functionAlink = $(this);
    var functionBlink = $(this);
    //$("#prev-ajax").fadeOut(0);
    //$("#next-ajax").fadeOut(0);


    ajaxify(functionAlink.attr('href'));
    window.location.hash = functionAlink.attr("href");
    $('.link').removeClass('current');


    var href = functionBlink.attr('href');
    var link = $(".link[href*= '" + href + "']:not(#prev-ajax, #next-ajax)");
    link.addClass('current');
    var $parent = link.parents('.element');
    var prev = $parent.prev().find('.link').attr('href');
    var next = $parent.next().find('.link').attr('href');
    if (typeof prev != 'undefined' ) {
        $("#prev-ajax").attr('href', prev);
        $("#prev-ajax").animate({opacity: 1}, 300);
    }else {
        $("#prev-ajax").removeAttr("href");
        $("#prev-ajax").animate({opacity: 0.4}, 300);
    }
    if (typeof next != 'undefined' ) {
        $("#next-ajax").attr('href', next);
        $("#next-ajax").animate({opacity: 1}, 300);
    }else {
        $("#next-ajax").removeAttr("href");
        $("#next-ajax").animate({opacity: 0.4}, 300);
    }
});

});



$(function(){
    $(window).hashchange( function(){
    var hash = window.location.hash;
    var hash = location.hash.replace("#","");

if(window.location.hash) {
  $.get(hash, function (data) {
      $('#LoadingImage').show();
            $("#ajaxify_container").fadeOut(1500, function () {
                $(this).html(data).fadeIn(1500, function () {
                    $('#LoadingImage').hide();
                });
            });
        });
} else {
  // Fragment doesn't exist
}       
  })
  $(window).hashchange();
});

私の英語でごめんなさい、私はフランス人です

ロイク

4

1 に答える 1

2

（すぐに質問を読んでください。できるだけ早く離れる必要があります。トピックから外れている場合は申し訳ありません）：

多分あなたは試してみるべきです：

$(document).on("click",'.link:not("#prev-ajax,#next-ajax")',function (e) {

それ以外の

$('.link:not("#prev-ajax,#next-ajax")').on("click",function (e) {

あなたの英語はかなり上手です (フランス語の観点から ;-)

于 2013-04-03T16:05:10.367 に答える