Question

我不知道我的代码有什么问题。即使我使用live函数，jQuery也会忽略我选择的类。

继承人fiddle。

$('.rap').each(function () {
    $(this).click(function () {
        $(this).addClass('selected');
        $(this).removeClass('rap')
        $(this).animate({
            'left': 0,
            'width': '600px'
        });
        $(this).css('z-index', '10');
        $(this).find('.boxs').animate({
            'left': 0
        });
    });
});

$('.selected').live("click", function () {
    alert('s');
    $(this).removeClass('selected');
    $(this).addClass('rap');
    $(this).parent().animate({
        'left': '200px',
        'z-index': 0,
        'width': '200px'
    });

    $(this).animate({
        'left': '-200px'
    });
});

Answer 1

改为使用.on()：

$(document).on("click", ".selected", function () {
    alert('s');
    $(this).removeClass('selected');
    $(this).addClass('rap');
    $(this).parent().animate({
        'left': '200px',
        'z-index': 0,
        'width': '200px'
    });

    $(this).animate({
        'left': '-200px'
    });
});

.live()在jQuery 1.7中已弃用，已在1.9中删除，因此您应该使用.on()。

另外，来自jQuery文档：

事件处理程序仅绑定到当前选定的元素;在您的代码调用.on（）
时，它们必须存在于页面上

这就是为什么你应该把它绑定到document而不是你稍后要添加的类。

Answer 2

不推荐使用

live()方法。

使用on()

$(document).on("click", ".selected", function () {
   //do stuff
}

请参阅In jQuery, how to attach events to dynamic html elements?

Answer 3

我认为你为自己过分复杂的事情。我冒昧地改变你的HTML和你的CSS，所以我可以写一个很好的简单jQuery脚本，基本上你想要的。

HTML：

<div class="wrapper">
    <div class="boxs panel1"></div>
    <div class="boxs panel2"></div>
    <div class="boxs panel3"></div>
</div>

CSS：

.wrapper {
    position: relative;
    overflow: hidden;
    height: 200px;
    width: 600px;
}
.boxs {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 0px;
    z-index: 0;
}

.panel1 {
    background-color: blue;
    left: 0;
}
.panel2 {
    background-color: red;
    left: 200px;
}
.panel3 {
    background-color: yellow;
    left: 400px;
}

jQuery的：

var boxes = $('.boxs'),
    collapse = function (i) {
        $(boxes[i]).css('z-index', 10).on('click', expand);
        boxes.animate({left: '200px'});
    },
    expand = function () {
        var t = $(this);
        $(boxes[0]).animate({left: 0});
        $(boxes[2]).animate({left: '400px'}, function () {
            t.css('z-index', 0);
            t.off('click', expand);
        });
    };
boxes.each(function (i) {
    $(this).on('click', function () {
        collapse(i);
    });
});

Demo

我希望这会有所帮助。

Answer 4

我找到了解决方案让这个工作..我需要改变整个事情：在这里。

panelSlides（）

function panelSlides() {
    var panelNo = $('.panel-item').length;
    //var panelNo = $('.panel-item').length;
    var panelContainerWidth = $('.panel-wrapper').width();
    //var panelContainerWidth = $('#block-views-main-panels-main-panels').width();

    //alert(panelNo);
    //alert(panelContainerWidth);


    var panelWidthPercentRaw = ((panelContainerWidth / panelNo) / panelContainerWidth) * 100;
    var panelWidthPercent = Math.round(((panelContainerWidth / panelNo) / panelContainerWidth) * 100) + '%';

    $('.panel').width(panelContainerWidth);// Get the panels occupy the whole width of the container

        $('.panel-item').each(function() {
            var panelPercentPos = Math.round(($(this).index() * panelWidthPercentRaw)) + '%' ;
            //var panelPosRaw = $(this).index() * panelWidth + 'px';

            $(this).width(panelWidthPercent);// Specify the divided width of each panel wrapper in percent; 
            $(this).css('left',panelPercentPos);// position each wrapper to the page


            $(this).click(function() {

                var toggleWidth = $(this).width() == panelContainerWidth ? panelWidthPercent : panelContainerWidth;
                var togglePos = $(this).css('left') > '0px' ? "0%" : panelPercentPos;// adjust wrapper width

                $(this).animate({ 
                    width: toggleWidth,
                    left:togglePos
                    });

                $('.panel-item').css('z-index',10);
                $(this).css('z-index',100);
            });

        });
};//function closed

以下是演示：http://jsfiddle.net/euG63/

如何单击动态创建类的div？

4 个答案: