Question

我有一个包含3个输入元素的列表。每个元素的name属性都具有相同的值＆＃34; shipping_method＆＃34;并且具有不同的id值。

int

使用jquery .on（）事件绑定

到每个元素

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

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

2 个答案: