CODEWITHSUNDEEP
javascriptjqueryhtml
Franky238
Franky238

Reputation: 519

Jquery removeClass() on click

Hi i have this problem: I want to click on div which will flipped (this is work) but next step is flipp div back on click on "x" (this is my problem).

HTML code:

<div class="col-md-4">
    <div class="balik">
        <div class="panel panel-default panel-cube">
            <div class=" flip">
                <div class="card">
                    <div class="panel-body face front">
                        <h4>Balík 28 dní</h4>
                        <br>
                        <h1>16,80€</h1>
                        <br>
                        <h4>Zisti viac o balíku &raquo;</h4>
                    </div>
                    <div class="panel-body face back">
                        <p class="close">x</p>  <a href="#"><h4>O Balíku 28 dní</h4></a>
                        &raquo; celkom 28 dní na topovanie
                        <br />&raquo; 5 topovaných inzerátov
                        <br />&raquo; -30% z ceny oproti balíku 7 dní
                        <br />
                        <br>
                        <button class="btn btn-success"><i class="fa fa-shopping-cart"></i> Kúpiť</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

JQUERY code: 

$(function(){
$('.flip').click(function(){
    $(this).find('.card').addClass('flipped')
    });// this is work

$('.close').click(function(){
        $('.flip').find('.card.flipped').removeClass('flipped')
    }); // this is not work
});

Thanks for answers.

Upvotes: 1

Views: 99

Answers (2)

Ram
Ram

Reputation: 144689

That's because events bubble up, you should stop the propagation of the event:

$('.close').click(function(event) {
    event.stopPropagation();
    $('.flip').find('.card.flipped').removeClass('flipped');
});

http://jsfiddle.net/aaLUs/

Upvotes: 2

isherwood
isherwood

Reputation: 61073

Because .flipped is essentially a dynamically-created element, you'd need to use event delegation:

http://jsfiddle.net/isherwood/7Zg92/

$(document).on('click', '.close', function () {
    $('.flip').find('.card.flipped').removeClass('flipped')
});

Upvotes: 2

Related Questions