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

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"  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

CodePudding user response：

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);
});

CodePudding user response：

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"  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"  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"  name="unique_radio"  data-id="third">
</div>