-1

I have size swatches on a page. When I click on swatch "selected" class add to the clicked swatches. If I clicked again then the added class is removing.

I want to stop removing the class on again click on that element.

HTML:

<div class="swatch-attribute-options clearfix">
<div class="swatch-option text selected" option-type="0" option-id="143" option-label="L" option-tooltip-thumb="" option-tooltip-value="L">L</div>
<div class="swatch-option text" option-type="0" option-id="142" option-label="XL" option-tooltip-thumb="" option-tooltip-value="XL">XL</div>
</div>
Vinod Kumar
  • 147
  • 2
  • 11

2 Answers2

0

Looks like the behavior is coming from a library that you are using. To override the behavior, simply disable click event callback after the first click. But beware, this will also disable any other actions that were defined in your click callback.

Original Answer: (This solution will fail for OP because it is evident from the comments that the click event has more handles after selection. See the update to the answer at bottom of my post) Add this towards the end of your javascript on the page:

$(".swatch-attribute-options .swatch-option").on("click", function() {
  $(this).off("click");
});

Demo fiddle here

If you suspect there are more events in callback, simply add the class selected again. This will momentarily remove the selection but will add it back almost instantly unless there are any time consuming activity in the plugin code that handles click event.

$(".swatch-attribute-options .swatch-option").on("click", function() {
    $(this).addClass("selected"));
});

Update based on comment(s): This should keep the only last selection and wont unselect if clicked again. Also, it will not block any subsequent handles in your click event

$(".swatch-attribute-options .swatch-option").on("click", function() {
    $(this).siblings(".swatch-option").removeClass("selected");
    $(this).addClass("selected");
});

Updated Fiddle

Fr0zenFyr
  • 1,899
  • 2
  • 28
  • 48
  • I want to select only one at a time – Vinod Kumar Mar 22 '18 at 13:01
  • Do you mean select only one swatch and unselect any previously selected ones? – Fr0zenFyr Mar 22 '18 at 13:04
  • Yes, and same element not clicked again. – Vinod Kumar Mar 22 '18 at 13:07
  • Here two swatches, after loading nothing selected. When we select swatch then "selected class" added, but when we click again then this element unselect. If a user select swatch then it must be selected at least one of them – Vinod Kumar Mar 22 '18 at 13:14
  • Check updated answer. To remove all selections on load, just remove `selected` class from frost swatch in your HTML. See [this fiddle](https://jsfiddle.net/5rfthprk/11/) – Fr0zenFyr Mar 22 '18 at 13:18
0

If the code removing the selected class comes from an external handler, try putting this code where you are sure will run before that handler (preferably as high as possible among your includes).

Notice this will also cancel any other action inside the external handler

This is an example of how you could go about for preventing undesired code from running. I included two handlers, the second shouldn't run as a demonstration of what should happen to your unwanted code.

Let me know if it works

$('.swatch-option').click(function(e){
  e.stopImmediatePropagation();
  $(this).addClass("selected").siblings('.swatch-option').removeClass('selected');
  alert('notice how "unwanted code" does not run');
});

$('.swatch-option').click(function(e){
  alert('unwanted code');
});
.selected{
  background: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="swatch-attribute-options clearfix">
<div class="swatch-option text selected" option-type="0" option-id="143" option-label="L" option-tooltip-thumb="" option-tooltip-value="L">L</div>
<div class="swatch-option text" option-type="0" option-id="142" option-label="XL" option-tooltip-thumb="" option-tooltip-value="XL">XL</div>
<div class="swatch-option text selected" option-type="0" option-id="143" option-label="L" option-tooltip-thumb="" option-tooltip-value="L">L</div>
<div class="swatch-option text" option-type="0" option-id="142" option-label="XL" option-tooltip-thumb="" option-tooltip-value="XL">XL</div>
<div class="swatch-option text" option-type="0" option-id="143" option-label="L" option-tooltip-thumb="" option-tooltip-value="L">L</div>
<div class="swatch-option text" option-type="0" option-id="142" option-label="XL" option-tooltip-thumb="" option-tooltip-value="XL">XL</div>
<div class="swatch-option text selected" option-type="0" option-id="143" option-label="L" option-tooltip-thumb="" option-tooltip-value="L">L</div>
<div class="swatch-option text" option-type="0" option-id="142" option-label="XL" option-tooltip-thumb="" option-tooltip-value="XL">XL</div>

</div>
Scaramouche
  • 3,188
  • 2
  • 20
  • 46
  • After using this code, I am unable to add product into the cart. – Vinod Kumar Mar 22 '18 at 13:19
  • so indeed the unwanted code runs after yours and it does more than just toggling `selected` class, right? so you need a solution that prevents only the toggling of the class but leaves all other behaviour as is, correct? – Scaramouche Mar 22 '18 at 13:23
  • That's because of `e.stopImmediatePropagation()` which is preventing the rest of the handlers from being executed in the `click` event. – Fr0zenFyr Mar 22 '18 at 13:23
  • can we use alternate of e.stopImmediatePropagation() – Vinod Kumar Mar 22 '18 at 13:25