0

This is so simple problem but i don't understand problem. I was click div change class but it does not work when I click on the changing div

$(".one").click(function() {
$(this).attr('class', 'two');
});




$(".two").click(function() {
$(this).attr('class', 'one');
});
.one {width: 50px; height: 50px; background-color:red;}
.two {width: 50px; height: 50px; background-color:blue;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one"></div>
Temani Afif
  • 180,975
  • 14
  • 166
  • 216
Gökhan Şahiner
  • 39
  • 3
  • you added a listener to an element that doesn't exist, you need delegate event in this case https://jsfiddle.net/nxpct1or/1/ – Temani Afif Jun 20 '18 at 19:52
  • @TemaniAfif no, that isn't how that code actually works. the $('.one') selector gets a references to all _current_ elements that have the two class applied and then .click adds an event listener for each of the elements. Changing the class has no effect after this code has run. The second $('.two') will return no elements so no event listeners will be added. You can see an example of this working here: http://jsfiddle.net/z802kxL6/1/ – Adam H Jun 20 '18 at 20:21
  • @AdamH what I said was wrong ? :) .. he added a listener to `.two` and that element doesn't exist (a I said) so the code won't work and he need event delegation like the code I shared and is working ... or another way like you did, there is a plenty of solution, but the main issue is the same – Temani Afif Jun 20 '18 at 20:29
  • @TemaniAfif His attempt to add a listener to .two has 0 effect on his code. There are no elements with two as a class so the click part wont be applied. He does however have an element with a one class and his first line of JavaScript is attaching the click event to those elements, so it will work. The only change required to his code is to add toggleClass calls to his first event handler and then he can just delete the $('.two') call. Your proposed solution wont work because it will remove any other class that is applied to that element, thats why toggle class is better in this case. – Adam H Jun 20 '18 at 20:38
  • @TemaniAfif take a look at this slight change to your solution and how it breaks the requirement of superImportantClass https://jsfiddle.net/nxpct1or/2/ – Adam H Jun 20 '18 at 20:43
  • @AdamH Am not discussing the solutions ;) we can do this in differents ways and codes ... It's about the issue : he has a non working code and he want to understand. The issue is like I said (and you agree about this) because the `.two` doesn't exist so the listener will not work later if you will add the class (like described in the duplicate question). One solution is to consider event delegation OR to keep only one listener like you did or maybe something else. And what I propose is a fast solution so he can understand the issue, not the *best* solution – Temani Afif Jun 20 '18 at 20:43
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/173510/discussion-between-adam-h-and-temani-afif). – Adam H Jun 20 '18 at 20:44

1 Answers1

-1
$(".one").click(function() {
$(this).toggleClass('one');
$(this).toggleClass('two');
});

$(".two").click(function() {
$(this).toggleClass('one');
$(this).toggleClass('two');
});
znmto
  • 67
  • 1
  • 6
  • The second $('.two') call returns nothing and does not add any event listeners, there is no need for it because there are no elements with the two class applied. The initial $('.one') call is all that is needed. – Adam H Jun 20 '18 at 20:40