Carousel as button not working unless slide is in first position

I'm creating a set of controls to combine product color and patterns into one image. This is accomplished by changing the values to two drop downs and clicking on images in two bxslider carousels. Everything works until you click on a carousel in the second postion after one full rotation (left: -200px). If this one is clicked, nothing happens. Here's my code for the carousel's click function and a link to a live example. You have to click on at least one picture in each carousel for it to start.

$(document).ready(function(){
$('ul.carousel_front li img').click(function() {

    if($(this).hasClass('inactive_front'))
    {
        $(this).addClass('inactive_front').removeClass('active_front');
    }
    else 
    {
        $("ul.carousel_front li img").removeClass("active_front"); 
        $(this).addClass(开发者_开发问答"active_front");
    }

    html = '<img src="images/' + $('#front_finish').val() + '_' + $('.active_front').attr("id") + '_' + $('#back_finish').val() + '_' + $('.active_back').attr("id") + '.jpg">';
    $("#main-image").html(html);

}); });

Link to example

Use .live() instead of .click().

$(document).ready(function ()
{
    $('ul.carousel_front li img').live('click', function()
    {
        if($(this).hasClass('inactive_front'))
        {
            $(this).addClass('inactive_front').removeClass('active_front');
        }
        else 
        {
            $('ul.carousel_front li img').removeClass('active_front'); 
            $(this).addClass('active_front');
        }

        html = '<img src="images/'
            + $('#front_finish').val() + '_'
            + $('.active_front').attr('id') + '_'
            + $('#back_finish').val() + '_'
            + $('.active_back').attr('id') + '.jpg">';
        $('#main-image').html(html);
    });
});

Demo: http://jsfiddle.net/mattball/nKDGH/

If I had to guess, bxslider dynamically creates and destroys the image elements, which causes event handlers on the images to be lost. .click() binds a hander to each <img>, but .live() binds a single handler at the root of the DOM tree, which won't get destroyed by the slider.