How to click a div with class dynamically created?

Question

I don't know what's wrong with my code. jQuery ignores the class selected I have added even though I use live function.

Heres a 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'
    });
});

The live() method was deprecated in jQuery version 1.7, and removed in version 1.9. Use the on() method instead. — Jose, Jun 06 '13 at 15:55
It seems this question gets asked several times a day. Why not simply search SO, or even Google? — Derek Henderson, Jun 06 '13 at 15:56
@KevinB could you explain your comment? Do you simply mean that live is no more defined in jquery? — A. Wolff, Jun 06 '13 at 15:59
The solution did not work in my jsfiddle, i need to have an effect where the colored boxes expand then revert to same size when clicked again :( thank you anyway — ARGO, Jun 06 '13 at 16:28

Joe · Answer 1 · 2013-06-06T16:06:11.510

Use .on() instead:

$(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() was deprecated in jQuery 1.7 and removed in 1.9 so you should be using .on().

Also, from the jQuery docs:

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on()

That's why you should bind it to document not the class that you're going to be adding later.

score 2 · Answer 2 · edited May 23 '17 at 11:49

2

live() method is deprecated.

Use on()

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

See In jQuery, how to attach events to dynamic html elements?

edited May 23 '17 at 11:49

Community

1
1

answered Jun 06 '13 at 15:55

Suresh Atta

120,458
37
198
307

2

More than just deprecated...not even included in the latest jQuery. – Derek Henderson Jun 06 '13 at 16:03

score 1 · Answer 3 · answered Jun 07 '13 at 09:52

I think you overcomplicated things for yourself. I took the liberty of changing your HTML and your CSS so I could write a nice simple jQuery script that does essentially what you want.

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

I hope this helps.

Hi Derek, thank you for your reply, however when I tried the demo, all the boxes collapsed at the center at the same time. My goal is to expand the box when clicked and occupy the whole container then when clicked again, the selected box goes to their original location at the beginning. Would this be possible. Hope you can help me — ARGO, Jun 19 '13 at 10:21
@ARGO, I tried several ways to do it the way you describe, but I kept encountering problems with event propagation / bubbling that I could not resolve. This is why I gave up and did it this way, which is much simpler and straightforward and looks the same. Sorry I couldn't be more helpful. — Derek Henderson, Jun 19 '13 at 10:25
Okay, i guess im in a deadeend, thanks anyway for spending time... I might need find another approach or different effect. — ARGO, Jun 19 '13 at 10:35

score 0 · Answer 4 · answered Jun 21 '13 at 04:14

I found the solution to get this working.. I need to change the whole thing though: here it is.

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

Here is the demo: http://jsfiddle.net/euG63/

How to click a div with class dynamically created?

4 Answers4