jquery change function not working correctly with multiple class

Question

please see the code .

$(".test").on("click", function() {
  var sclass = $(this).attr("class").split(" ")[1];
  $(".color").trigger("click");

  $(".color").on("change", function() {
    var scolor = $(this).val();
    $("." + sclass).css("background-color", scolor);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input type="color" name="color" class="color"><br><br>
<div class="test test1">hii</div><br><br>
<div class="test test2">hello</div>

here i need to change the background color of the div by selecting color . But when i am selecting color for one div then this color is effected to two ? what is the error in this code ?

lolsky · Accepted Answer · 2016-11-03 10:58:03Z

1

In order to understand this bug, you will need to understand Javascript closures. There's a good link here that explains it, and it reveals this is a pretty easy mistake to make (link to MDN closures).

You're creating closures when you assign these functions to those events , and each closure shares the same environment. Essentially sclass will be equal to test test2 regardless. You're selection in $("." + sclass) will expand to $(.test test2). Also you may need to include quotes in your jQuery selection.

edited Nov 3, 2016 at 10:58

answered Nov 3, 2016 at 10:37

lolsky

4482 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

fdomn-m Over a year ago

While interesting, it's not the issue here. The issue is that using on leaves the event handler behind, so the 2nd click still fires for the first div (ie on 2nd click, there are 2 change handlers rather than just the one for the current div).

fdomn-m Over a year ago

For future reference: you've detailed what could be causing the issue, which is great, but you've not provided info on how to fix the issue, ie an answer.

Vixed · Accepted Answer · 2016-11-03 15:01:39Z

1

You should use off and then on

$(".test").on("click", function() {
  var $el=$(this);
  $(".color").off("change").on("change", function() {
     $el.css("background-color",  $(this).val());
  }).click();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input type="color" name="color" class="color"><br><br>
<div class="test test1">hii</div><br><br>
<div class="test test2">hello</div>

edited Nov 3, 2016 at 15:01

answered Nov 3, 2016 at 9:51

Vixed

3,5096 gold badges40 silver badges69 bronze badges

9 Comments

Vixed Over a year ago

I'm using one and not on. Do you know the difference?

Vixed Over a year ago

You're wrong! He can change it when he wants... try my snippet. And please, read more about the meaning of "arrogance".

Vixed Over a year ago

He needs to change the color only on the div click.

Vixed Over a year ago

Exactly what he needs. We will see.

fdomn-m Over a year ago

So could just use off() with on() :)

|

Rory McCrossan · Accepted Answer · 2016-11-03 09:54:19Z

0

The problem you have is because you add a new change handler to the color input on each click. This means the first handler is attached to the .test1 element when you create a new one on .test2. This is why both elements are then effected by the change.

You need to move the change handler outside of the click handler. You can then just store the reference of the element directly instead of a class. Try this:

$(".test").on("click", function() {
  $(".color").data('el', $(this)).trigger("click");
});

$(".color").on("change", function() {
  var $el = $(this).data('el');
  $el && $el.css("background-color", this.value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input type="color" name="color" class="color"><br><br>
<div class="test test1">hii</div><br><br>
<div class="test test2">hello</div>

edited Nov 3, 2016 at 9:54

answered Nov 3, 2016 at 9:48

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

2 Comments

Vixed Over a year ago

Doesn't need a global var

Manik Over a year ago

could you please check this stackoverflow.com/questions/56404480/…

Collectives™ on Stack Overflow

jquery change function not working correctly with multiple class

3 Answers 3

2 Comments

9 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

9 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related