javascript - 如何仅从列表中的一项解除事件绑定(bind)

Question

我有一个包含 3 个输入元素的列表。每个元素都有具有相同值“shipping_method”的 name 属性，并具有不同的 id 值。

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

使用 jquery .on() 事件绑定(bind)到每个元素

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

我无法更改绑定(bind)事件的代码!我必须将事件与第二个输入元素分离。我尝试过使用jquery .off()，但在这种情况下，它解除了三个元素的事件的绑定(bind)。在这种情况下解除事件绑定(bind)有哪些选择？

Answer 1

您可以指定要从选择器中排除的元素，而不是使用 off，我使用了 :eq选择器取消选择第二个元素。

$('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>