CODEWITHSUNDEEP
javascriptjquery
Sanya Kuzovlev
Sanya Kuzovlev

Reputation: 21

How to unbind event only from one item in a list

I have a list with 3 input elements. Every element have name attribute with the same value "shipping_method" and have different id values.

<ul>
<li>
<input type="radio" name="shipping_method" id="shipping_method_1"  class="shipping_method" checked="checked">
<label for="shipping_method_1">Method 1</label>
</li>
<li>
<input type="radio" name="shipping_method" id="shipping_method_2"  class="shipping_method">
<label for="shipping_method_1">Method 2</label>
</li>
<li>
<input type="radio" name="shipping_method" id="shipping_method_3"  class="shipping_method">
<label for="shipping_method_1">Method 3</label>
</li>
</ul>

To each element using jquery .on() event bound

$(document).on("change", "input[name^=shipping_method]", shipping_method_selected)

I can't change the code which binds the event! I have to decouple event from the second input element. I have tried to use jquery .off(), but in this case, it unbinds the events of the three elements. What are the options of unbinding events in such situations?

Upvotes: 1

Views: 77

Answers (2)

Pankaj Shukla
Pankaj Shukla

Reputation: 2672

You can do this: Exclude second input from event binding by using :not and the id of the second input.

$(document).on("change", "input[name^=shipping_method]:not(#shipping_method_2)", shipping_method_selected);

function shipping_method_selected() {
  console.log('selected');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <input type="radio" name="shipping_method" id="shipping_method_1" class="shipping_method" checked="checked">
    <label for="shipping_method_1">Method 1</label>
  </li>
  <li>
    <input type="radio" name="shipping_method" id="shipping_method_2" class="shipping_method">
    <label for="shipping_method_1">Method 2</label>
  </li>
  <li>
    <input type="radio" name="shipping_method" id="shipping_method_3" class="shipping_method">
    <label for="shipping_method_1">Method 3</label>
  </li>
</ul>

Upvotes: 0

G07cha
G07cha

Reputation: 4154

Instead of using off you can specify which element to exclude from a selector, I've used :eq selector to deselect the second element.

$('input[name^=shipping_method]:not(:eq(1))').on("change", shipping_method_selected)

function shipping_method_selected() {
 console.log('called');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<input type="radio" name="shipping_method" id="shipping_method_1"  class="shipping_method" checked="checked">
<label for="shipping_method_1">Method 1</label>
</li>
<li>
<input type="radio" name="shipping_method" id="shipping_method_2"  class="shipping_method">
<label for="shipping_method_1">Method 2</label>
</li>
<li>
<input type="radio" name="shipping_method" id="shipping_method_3"  class="shipping_method">
<label for="shipping_method_1">Method 3</label>
</li>
</ul>

Upvotes: 1

Related Questions