Pressing radio label double triggers an onclick event. Best way to work around this?

Question

I have some code listening for a onclick event on a particular radio button/label. However the click on the label/radio "doubletaps" the click event and bugs out my code. - the ".custom_block" appears and disappears, it only appears and stays visible if I press the same radio button the second time. I've tried prevent default event - it works, but then the radio button is not selected. Whats the best solution in this case?

$('#trigger').live('click', function (event) {
  
  clicked_id = event.target.id;
  clicked_class = $('#' + event.target.id).attr('class');
  
  if(event.target.id == 'flat.flat' || event.target.id == "flat\\.flat"){
   console.log("GOOD");
   $(".custom_block").css("display", "block");
   //event.preventDefault(); // this works - but the radio itself is not checked after the click.
  }else{
   console.log("BAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD");
   $(".custom_block").hide();
  }
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<div class="surrounding-div">
 <div id="trigger">
    <div class="radio-input radio">  
    <input type="radio" name="shipping_method" value="flat.flat" id="flat.flat" checked="checked" data-refresh="5" class="styled"> 
   <label for="flat.flat" data-label="flat.flat">
    <span class="text">some text</span><span class="price">1.90 €</span></label>
    </div>
 </div>
 <div class="custom_block">
  some content I want visible.
 </div>
</div>

Please include all the related code (HTML, CSS) in a code snippet so that we can reproduce your issue. This issue could be caused simply by the way you've structured your HTML. — Scott Marcus, Feb 18 '19 at 19:41
Also, JQuery has deprecated the `.live` method and recommends the use of `.on()` instead. If you need to have events for dynamically created elements, use event delegation. — Scott Marcus, Feb 18 '19 at 19:42
I don't think css is necessary as the radio buttons are unstyled in this case. I'll update the question to include the html shortly. — PaaPs, Feb 18 '19 at 19:47
That's up to you, we ask for all *relevant* code and CSS could be relevant here because your handler as CSS selectors and modifies the CSS style. If you don't include the CSS, we may not be able to see your handler do its thing and we need to be able to reproduce your issue in order to help. — Scott Marcus, Feb 18 '19 at 19:48
This sounds almost exactly like [jQuery Click fires twice when clicking on label](https://stackoverflow.com/q/8238599/215552) — Heretic Monkey, Feb 18 '19 at 19:55
as I mentioned above - i've tried the prevent default method and the result is an unckechked radio button that would 100% result in customer confusion. — PaaPs, Feb 18 '19 at 19:58
`id="flat.flat"` why the `.` in an ID selector? It's like looking for trouble to me — Roko C. Buljan, Feb 18 '19 at 19:58
it's autogenerated opencart structure (1.xx), I won't change this. — PaaPs, Feb 18 '19 at 20:00
@PaaPs if you have multiple of such radios - than your code and the else statement make no sense. - Unless you also uncheck selected radio buttons inside that else... — Roko C. Buljan, Feb 18 '19 at 20:08
I have different radios with different names and id's. Are you familiar with how the radio buttons work ? If one is selected the other radio buttons are automatically de-selected, it's the default working of a radio button. — PaaPs, Feb 18 '19 at 20:10
There are two lines in the accepted answer on the duplicate (not just `preventDefault`). If you've tried adding both to your code, *show that in your code*, rather than yelling at people who are trying to help you. — Heretic Monkey, Feb 18 '19 at 20:13
I'm not yelling, sorry if that seemad that way. The answer was flagged as a duplicate even when in the original unedited question I marked that I used the preventDefault event and it did not help. I've commented out the stopprogagation event and commented out the prevent default - as the propagation event did nothing. I'll add the stopPropagation() event in the question. — PaaPs, Feb 18 '19 at 20:16
If you go read through ***all*** the answers given on the page I reference, you will see that there are other solutions than `preventDefault()`. Please don't edit your question to include an all caps rant. — Scott Marcus, Feb 18 '19 at 20:21
read through all the answers tried all of the offered solutions - and the bug is still there. I've tried checking if the event tagname is input and if it's span (which is triggerint the current double event) not to hide it, it's still making it disappear. — PaaPs, Feb 18 '19 at 20:44

score 0 · Answer 1 · answered Feb 18 '19 at 20:13

I simplified the HTML (you should do too in your "autogenerated" backend).
Basically, wrap all that should trigger the input change inside that <label>

$(document).on('change', '.radio_show_block', function(event) {
  $(this).closest('label').next('.custom_block').show();
});

.custom_block {
  display: none;
}

<label>
  <input class="radio_show_block" type="radio" name="bla" value="bla">
  <span class="text">some text</span>
  <span class="price">1.90 €</span>
</label>

<div class="custom_block">some content I want visible.</div>

<script src="//code.jquery.com/jquery-3.1.0.js"></script>

Pressing radio label double triggers an onclick event. Best way to work around this?

1 Answers1