Jquery fade in / out looping more than once

Question

I've been using jquery to do some image swapping and fading.

I have a div, with and id of cup-builder-error

I use jquery to load images into divs, then on error fade in and out the error div

$("#imgShell").attr("src","products/components/" + idArray[2] + ".png").error(
                                        function(){
                                            $("#cup-builder-error").fadeIn('fast');                                             
                                            $("#cup-builder-error").fadeOut('slow');
                                        });

that code is surrounded by $("a").click( function(event){

What happens is the fade in / out routine loops the number of time that the error happens.

What did I do wrong?

Thanks for the help!

Answer 1

Each time the "a" is clicked, a new error event is being bound. You only need to do it once.

$('#imgShell').error(function () {
    $("#cup-builder-error").fadeIn('fast');                                             
    $("#cup-builder-error").fadeOut('slow');
});

$('a').click(function (event) {
    $('#imgShell').attr("src","products/components/" + idArray[2] + ".png");

    event.preventDefault();
});