Question

So I have a weird problem. I have an <a/> tag that I am applying a click event to using jQuery.on(). Here is where the problem happens. Every time I click on the <a/> tag, it seems that it adds another click event to the tag.

So I have an a tag like:

<a href="#" id="next-arrow" class="nav-arrows inactive"></a>

And here is my JS.

$('body').on('click', '#next-arrow', function(e) {
    if($(this).hasClass('active')) {
        $('body').addClass('loading-cursor');
        document.location.hash=step_names[current_step];
        $(this).removeClass('active').addClass('inactive');
        $('#tools').append(loader);
        $('#tools').find('.loader-outer').fadeIn('fast', function() {
                //Do some stuff here once the loader is faded in
        }); //End loader FadeIn()
    }   
    e.preventDefault();
});

That function is within a $(function() {});

Any idea one what might be happening? I have a bunch of JS code for other elements that aren’t related. However, if someone has an idea, and would like some other code up, let me know.

Thanks

PS. I would just like to add, that I went to make a jsFiddle thing to try and replicate, but I can’t replicate it. So I have no idea what the problem is

Answer 1

Start Note: Do I add this answer here, or just mention in a comment?

So I figured out the problem. I was appending the loader, and then fading in the loader using a class selector, then fading the loader out, but not removing the element from the DOM.

So then the next time I called the function, it was appending the loader, fading it two loaders, and then for each loader, running the middle function, and so forth…

So, once I loaded everything, I just removed the loader element from the DOM, and all is happy again.

Thanks for the help anyway… I did learn a thing or two more about jQuery during my research…