JQuery делает функцию обратного вызова

Создаю собственный скрипт, который позволяет загружать содержимое html с помощью ajax (загрузчик содержимого ajax html). Этот скрипт запускается при щелчке элемента.JQuery делает функцию обратного вызова

Этот скрипт отлично работает с жестко закодированным элементом при щелчке.

Однако, в моем 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(); 
});

Извините за мой английский, я французский

Лоик

источник

2013-04-03 lolo

Это трудно понять, что вы просите, но вы уже используете функцию обратного вызова в '$ .get', чтобы добавить элементы, поэтому я предполагаю, что проблема заключается в том, что обработчики событий не работают с динамическим контентом, и для этого вам придется использовать делегированную версию 'on()'. Вы можете прочитать документацию jQuery, где она отлично объясняется, или искать делегированные обработчики событий в SO. – adeneo

Благодарю вас за ответ. Я уже добавляю в свой код '.on' на функцию щелчка. Это функции щелчка, которые не работают над добавленными элементами ... – lolo

(быстро прочитать ваш вопрос, необходимо оставить как можно скорее Извиняюсь, если тема Выкл.):

Возможно, вам стоит попробовать:

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

вместо

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

Ваш английский очень хорошо (с французской точки зрения ;-)

источник

2013-04-03 16:05:10 jbl

Вы правы !!!! Большое спасибо! Он решает все мои проблемы. Мне нужно проверить, работают ли все функции кликов, но кажется, что все в порядке! – lolo

JQuery делает функцию обратного вызова

ответ

Смежные вопросы