Question

I have the following piece of code:

<form [attributes]>
  <input class="bound" type="radio" name="radioGroup" value="1" id="Radio1" />
  <label for="Radio1">One</label>

  <input class="bound" type="radio" name="radioGroup" value="2" id="Radio2" />
  <label for="Radio2">Two</label>

  <input type="submit" value="Submit" />
</form>

Now, this stuff gets prepopulated – so, if a user lands on this page – a radio button may be pre-selected. But I want the event handler to fire even if the radio button is clicked, so I am using two $.on() using ‘click’ and ‘change’:

<script type="text/javascript">
  $(function() {
    $(document.body).on('click', '.bound', function(event) {

      console.log( 'called click handler' );
      event.stopPropagation();

    });
    $(document.body).on('change', '.bound', function(event) {

      console.log( 'called change handler' );
      event.stopPropagation();

    });

  });
</script>

When you click on a radio button, it fires both events. I would like for only one event to get fired. Is there a possible/feasible way to accomplish this? I thought event.stopPropagation() or event.stopImmediatePropagation() would work, but it didn’t seem to.

Answer 1

I think you don’t need 2 event handlers.

$(function () {
    $(document.body).on('change', '.bound', function (event) {
        console.log('called change handler');
    });
    // fire it for pre-selected
    $('.bound:checked').change();
});

The working demo.

​