Rehan purohit Rehan purohit - 1 year ago 56
jQuery Question

length is not work on ajax loaded content

This is my Html

<li><a class="tab-click" href="#tab-4" data-tab-current="about-us">About Us</a></li>


this is my jQuery code

$(document).on('click', '.tab-click a', function(event) {
if($('.s-tab').length)
{
event.preventDefault();
$("html, body").animate({
scrollTop: $('.tab').offset().top - 80
}, 500);
$('.main-tab > li').removeClass("current");
$('[data-tab="'+$(this).attr("data-tab-current")+'"]').addClass("current");
var tab = $(this).attr("href");
$('.s-tab > div').not(tab).css("display", "none");
$(tab).fadeIn();
}
else{

alert('else');
}

})


my html page content loading using ajax. when i try to find "s-tab" class on my html document then i can't find, when i check without ajax loaded content it work fine. Any help much appreciated , Thanks in advance .

Answer Source

Your click selector is wrong. try this below code

 $(document).on('click', '.tab-click', function(event) {
if($('.s-tab').length)
    {
        event.preventDefault();
        $("html, body").animate({
            scrollTop: $('.tab').offset().top - 80
        }, 500);
        $('.main-tab > li').removeClass("current");
        $('[data-tab="'+$(this).attr("data-tab-current")+'"]').addClass("current");
        var tab = $(this).attr("href");
        $('.s-tab > div').not(tab).css("display", "none");
        $(tab).fadeIn();
    }
else{

 alert('else');
}

})
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download