CODEWITHSUNDEEP
javascriptjquery
Ste
Ste

Reputation: 241

Strange behaviour with jquery .click() event

I think I'm trying to doing a simple thing but probably i miss something. I've this little HTML

<div class="open"> OPEN</div>

with this simple CSS:

.open {
   color: green;
}

.close {
   color: red;
}

Now want to catch .click() events on the div but i want to select the with the class selector. And for second i need to change the class and catch again a different .click() event based on the class. So I used this JQuery code:

$('.open').click(function() {
  alert('open');
  $(this).removeClass('open');
  $(this).addClass('close');
  $(this).text('CLOSE');
});

$('.close').click(function() {
  alert('close');
  $(this).removeClass('close');
  $(this).addClass('open');
  $(this).text('OPEN');
});

But this not work:

You can check this jsfiddle: JsFiddle Example

Can you help me? Thanks

Upvotes: 0

Views: 73

Answers (4)

Erik Lucio
Erik Lucio

Reputation: 948

The problem is that the event handler bound to HTML element. In this case with the <div> No with the class close or open. For this reason, when you click on div only tigger the handler with alert("opne").

The solution is: Use only one handler and inside it put a 'if' stament. In pseudocode:

if class open
 do someting
else if class close
 do someting

Upvotes: 0

Jai
Jai

Reputation: 74738

You can simply do this with:

$('.open').click(function(){
     var txt = $.trim(this.textContent) == "OPEN" ? "CLOSE" : "OPEN";
    $(this).toggleClass('open').text(txt);
    // $(this).toggleClass('open close').text(txt);
    // use the commented line if you want to toggle the classes on each click.
});
.open {
   color: green;
}

.close {
   color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="open"> OPEN</div>

Upvotes: 3

Kautil
Kautil

Reputation: 1331

Try this,

$('.general').click(function() {

 var status = $(this).attr('data-status');
 if(status == 'open') {
    alert('open');
    $(this).removeClass('open');
    $(this).addClass('close');
    $(this).text('CLOSE');
    $(this).attr('data-status', 'close');
 } else if(status == 'close') {
    alert('close');
    $(this).removeClass('close');
    $(this).addClass('open');
    $(this).text('OPEN');
    $(this).attr('data-status', 'open');
 }

});

Then apply class to div

    <div class="open general" data-status='open'> OPEN</div>

Upvotes: 0

errand
errand

Reputation: 980

you need event delegation for this. since in the beginning, there is no div with the class close, the click handler is assigned to nothing.

just wrap your div OPEN and assign the click handler to the main div

$('.wrapper').on("click", ".open",function() {
  alert('open');
  $(this).removeClass('open');
  $(this).addClass('close');
  $(this).text('CLOSE');
});

$('.wrapper').on("click", ".close",function() {
  alert('close');
  $(this).removeClass('close');
  $(this).addClass('open');
  $(this).text('OPEN');
});

instead of $(this).removeClass('close'); $(this).addClass('open'); you shout consider to use $(this).toggleClass('open close');

https://jsfiddle.net/ezxe9ca8/2/

Upvotes: 0

Related Questions