Question

我正在创建一组控件，将产品颜色和图案组合到一个图像中。这是通过将值更改为两个下拉菜单并单击两个bxslider轮播中的图像来实现的。一切都有效，直到你在一次完整旋转后点击第二个位置的旋转木马（左：-200px）。如果点击这个，没有任何反应。这是我的旋转木马的点击功能代码和实际示例的链接。您必须在每个轮播中点击至少一张图片才能开始。

$(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

Answer 1

使用.live()代替.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);
    });
});

演示：http://jsfiddle.net/mattball/nKDGH/

如果我不得不猜测，bxslider会动态创建和销毁图像元素，这会导致图像上的事件处理程序丢失。 .click()将绑定者绑定到每个<img>，但.live()绑定DOM树根处的单个处理程序，这不会被滑块破坏。

除非滑块处于第一位置，否则旋转木板按钮不起作用

1 个答案:

演示：http://jsfiddle.net/mattball/nKDGH/