CODEWITHSUNDEEP
jqueryclick
Stvdd
Stvdd

Reputation: 116

Second click not working jquery

So I have some divs with class "nieuwitem", and depending on their position (left, middle, right) on the workflow, they have an addicitional class respectively bar1, bar2, bar3.

When I click on a .nieuwitem, it changes the clicked div to an absolute div and increases the width so it overlays the other items, and adds the class "activenews". It also adds an invisible div on the position of the clicked div to maintain the margin left (so the other items don't get all mixed up).

When I click another div, or the absolute div, the absolute div (with class="activenews") turns back to normal by removing the absolute div, and making the invisible div (invisitem), back to visible.

However, when I try to click the div that was set back to normal a third time, so it expands again, it doesn't work. And what I mean with that, nothing is triggered. Not even the "alert('hi');".

Thanks in advance

<script>
        $('.nieuwitem').click(function(){
            alert('hi');
        var dis = $(this).clone();


        $('.activenews').remove();
        $('.invisitem').animate({opacity:1}).removeClass('invisitem').removeAttr('style');


        if($(this).attr('class') == 'nieuwitem bar1' || $(this).attr('class') == 'nieuwitem bar2'){
            var offset = $(this).offset();

            $(this).hide();
            dis.insertAfter($(this)).animate({opacity:0},500).addClass('invisitem');

            $(this).css({ height:'320', position:'absolute', 'top' : offset.top, 'left':offset.left, 'background-image':'none', 'background-color':'rgba(255,255,255,0.1)'}).addClass('activenews').hide().animate({width:'42%', 'backgroundColor':'rgba(255,255,255,0.9)'},10).fadeIn(800).addClass('activenews');

        }
        else{
            var offset = $(this).prev().offset();

            $(this).hide();
            dis.insertAfter($(this)).animate({opacity:0},500).addClass('invisitem');

            $(this).css({ height:$(this).height(), position:'absolute', 'top' : offset.top, 'left':offset.left, 'background-image':'none', 'background-color':'rgba(255,255,255,0.1)'}).addClass('activenews').hide().animate({width:'42%', 'backgroundColor':'rgba(255,255,255,0.9)'},10).fadeIn(800).addClass('activenews');

        }

        }


    );

</script>

Upvotes: 0

Views: 492

Answers (1)

Stuart Burrows
Stuart Burrows

Reputation: 10814

this is because you are cloning the element but not the element's data and events (i.e. the click event.

If you change:

var dis = $(this).clone();

to

var dis = $(this).clone(true);

It should work; check the docs. There are some other peculiar things in your code (like adding the same class multiple times) but fo the question you have asked the above is the answer

p.s. welcome to SO :D

Upvotes: 3

Related Questions