Question 36025 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

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

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

Tags:

2

Answers


  1. 0

    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);
});
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search