如何仅从列表中的一个项目解除绑定事件

Question

我有一个包含3个输入元素的列表。每个元素的name属性都具有相同的值“shipping_method”，并具有不同的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。对（）事件绑定

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

我不能改变其结合事件代码！我必须从第二个输入元素中分离事件。我试图使用jQuery .off（），但在这种情况下，它解除了三个元素的事件。在这种情况下解除事件有什么选择？

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>

Answer 2

你可以这样做：排除从事件通过使用:not和第二输入的ID绑定第二输入。

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