JQuery取消绑定“筛选”结果与查询选择器结果

时间:2017-07-03 15:21:39

标签: javascript jquery dom

为例如设置事件监听器之后输入上的类'rule1' 即<input type="checkbox" class="rule1">

$('[class*=rule]').filter(function() {
    return /rule[0-9]+/.test($(this).attr('class'));
}).each(function() {
    $(this).bind('click', function() { limitRule(this) });
});

似乎我可以取消绑定此侦听器的唯一方法是执行完全相同的代码段并取消绑定

$('[class*=rule]').filter(function() {
    return /rule[0-9]+/.test($(this).attr('class'));
}).each(function() {
    $(this).unbind('click');
});

但为什么这不起作用?

$('.edit_contact_label input').unbind('click');

查询匹配相同的输入,结果集包含相同的元素,但仍调用原始侦听器。

作为参考,html可能类似于:

...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<h4>Option 1
    <label class="edit_contact_label">
        Main Contact <input type="checkbox" name="contact1n" id="contact1" value="1" style="" class=" rule1 standard ">
    </label>
</h4>
...
<h4>Option 2
    <label class="edit_contact_label">
        Main Contact <input type="checkbox" name="contact2" id="contact2" value="1" style="" class=" rule1 standard ">
    </label>
</h4>
...
<h4>Option 3
    <label class="edit_contact_label">
        Main Contact <input type="checkbox" name="contact3" id="contact3" value="1" style="" class=" rule1 standard ">
    </label>
</h4>
...

1 个答案:

答案 0 :(得分:0)

您必须使用.each(),因为您将侦听器单独绑定到每个jQuery对象,但是您不一定必须使用相同的.filter()函数来获取jQuery选择,只要您设法选择所有相同的元素:

$('[class*=rule]').filter(function() {
  return /rule[0-9]+/.test($(this).attr('class'));
}).each(function() {
  $(this).bind('click', function() {
    // notice this will never get called
    alert(this)
  });
});

$('.edit_contact_label input').unbind('click');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>Option 1
  <label class="edit_contact_label">
        Main Contact <input type="checkbox" name="contact1n" id="contact1" value="1" style="" class=" rule1 standard ">
    </label>
</h4>
<h4>Option 2
  <label class="edit_contact_label">
        Main Contact <input type="checkbox" name="contact2" id="contact2" value="1" style="" class=" rule1 standard ">
    </label>
</h4>
<h4>Option 3
  <label class="edit_contact_label">
        Main Contact <input type="checkbox" name="contact3" id="contact3" value="1" style="" class=" rule1 standard ">
    </label>
</h4>