How to make an element with specific class ignore a global listener?

Question

There is a global listener on specific input type:

$('input[type["radio"]').on('change', function() { ... });

But I have another more specific radio input with its own unique_radio class:

<input type="radio" class="unique_radio" name="unique_radio">

It also has its own click listener:

$('.unique_radio').on('click', function() { ... });

When I click it, both listeners trigger the functions, but I need only the function with the unique_radio listener to be triggered.

I have tried using stopImmediatePropagation and off as seen here:

Best way to remove an event handler in jQuery?

But that did not seem to work

who marked it as duplicate? it's the marked post does not work, it's two different type of listeners — pileup, Nov 10 '22 at 07:02
`evt.stopXXX` only apply to the current event *type* - it looks like you have a change and a click - which are not the same event types. Please provide some HTML so a solution can be provided. It looks like you could *cancel* the click event then change the value manually (via code) which won't raise the change event. — freedomn-m, Nov 10 '22 at 07:44
It was likely closed as you mentioned `stopImmediatePropagation` which stops the *same* event type and stops it going to the parent - you don't appear to have a hierarchy scenario, but without HTML, it's not 100% clear. Please provide relevant HTML to *reproduce* the issue. — freedomn-m, Nov 10 '22 at 07:45
The way to handle something like this is to simply make the global listener ignore the element with the specific class. It is a simple `if ()` statement — slebetman, Nov 10 '22 at 07:51
... as in.. `$('input[type["radio"]').on('change', function(e) { if ($(e.target).hasClass('.unique_radio') { return } else { ... } });` — slebetman, Nov 10 '22 at 07:53
@slebetman in which case you might as well exclude it from the listener: `$('input[type["radio"]:not(.unique_radio)').on('change',` — freedomn-m, Nov 10 '22 at 08:05

score 1 · Answer 1 · answered Nov 10 '22 at 09:54

Your selector is not working with my jquery but you can see below my sample so you can use it directly. You can use this to ignore input with unique_radio class. Use :not() explain with this you dont have to use preventDefault or return false.

My code;

$('input[type="radio"]:not(.unique_radio)').on('change', function(){
    console.log(1);
});
$('.unique_radio').on('change', function() {
    console.log(2);
});

score 0 · Answer 2 · answered Nov 10 '22 at 10:16

Here is if you attach event listener to all radio

$('input[type="radio"]').on('change', function() { 
    console.log($(this).data('id'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <label>First</label>
  <input type="radio" name="unique_radio" data-id="first">
</div>
<div>
  <label>Second</label>
  <input type="radio" name="unique_radio"  data-id="second">
</div>

<div>
  <label>Third</label>
  <input type="radio" class="unique_radio" name="unique_radio"  data-id="third">
</div>

If you want to remove listener on one radio with a particular class you can do it in different way

Here you restrict the execution only for radios which hasn't class unique_radio

$('input[type="radio"]').on('change', function() { 
    let $target = $(this);
    if(!$target.hasClass('unique_radio')) {
       console.log($target.data('id'));
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <label>First</label>
  <input type="radio" name="unique_radio" data-id="first">
</div>
<div>
  <label>Second</label>
  <input type="radio" name="unique_radio"  data-id="second">
</div>

<div>
  <label>Third</label>
  <input type="radio" class="unique_radio" name="unique_radio"  data-id="third">
</div>

Here if you want to remove the handler

let handler = function() { 
    console.log($(this).data('id'));
}

$('input[type="radio"]').on('change', handler);
$('.unique_radio').unbind('change');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <label>First</label>
  <input type="radio" name="unique_radio" data-id="first">
</div>
<div>
  <label>Second</label>
  <input type="radio" name="unique_radio"  data-id="second">
</div>

<div>
  <label>Third</label>
  <input type="radio" class="unique_radio" name="unique_radio"  data-id="third">
</div>

How to make an element with specific class ignore a global listener?

2 Answers2