Strange behavior of click event and event propagation bubbling-CodePudding

Suppose this UI:

<div id="wpforms-1345-field_6-container"  data-field-id="6">
  <label  for="wpforms-1345-field_6">What is your age?
    <span >*</span>
  </label>
  <ul id="wpforms-1345-field_6" >
    <li >
      <input type="radio" id="wpforms-1345-field_6_1" name="wpforms[fields][6]" value="0-15" required="">
      <label  for="wpforms-1345-field_6_1">0-15</label>
    </li>
    <li >
      <input type="radio" id="wpforms-1345-field_6_2" name="wpforms[fields][6]" value="16-25" required="">
      <label  for="wpforms-1345-field_6_2">16-25</label>
    </li>
    <li >
      <input type="radio" id="wpforms-1345-field_6_3" name="wpforms[fields][6]" value="26-35" required="">
      <label  for="wpforms-1345-field_6_3">26-35</label>
    </li>
    <li >
      <input type="radio" id="wpforms-1345-field_6_5" name="wpforms[fields][6]" value="36-45" required="">
      <label  for="wpforms-1345-field_6_5">36-45</label>
    </li>
    <li >
      <input type="radio" id="wpforms-1345-field_6_4" name="wpforms[fields][6]" value="46-100" required="">
      <label  for="wpforms-1345-field_6_4">≥46</label>
    </li>
  </ul>
</div>

What I want is to be able to select a radio input by clicking on the parent li. Unfortunately the interface is not built by me, so I can't set the for attributes appropriately (put them in the lis, instead of in the labels).

Therefore my only resource is JS (JQ actually)... So I wrote this small snippet to deal with the situation:

jQuery(function($) {
  $('.row-selection li').on('click', function(event) {
    alert('clicked');
    //   event.preventDefault();
    event.stopPropagation();
    $(this).children('input')[0].click(function(event) {
      alert('bubbledup');
      //    event.preventDefault();
      event.stopPropagation();
    });
  });
});

But notice the alerts? Well, the problem is that each "clicked" alert hits twice... At first, I thought that some bubbling up was occurring. But after putting the appropriate code in place (event.stopPropagation();) I still get double "clicked" alerts, and no "bubbledup" alerts.

So basically it works fine and I get the effect I need, I just don't understand why I get the double alerts. What am I missing here?

Here is a small fiddle I created to help you help me more easily. In the fiddle I also put some additional JS code that adds a couple of classes in order to achieve the coloring of the lis according to my needs. TIA

CodePudding user response：

This happens because when you click on the li element, the li element clicks the input element. When the input element is clicked, the event bubbles and makes the li element think it’s clicked again. This can even happen three times when you click on the input itself, which fires the li event listener, which clicks the input which triggers the li event listener.

You can solve this by creating a listener and stopping propagation for the radio button outside the li event listener (you were close):

jQuery(function($) {
  let t = 0;
  $('.row-selection li').on('click', function(event) {
    console.log("fired",   t, "times")
    $(this).children('input')[0].click();
  });
  // right HERE!!