jquery - 在jquery中添加一次事件

Question

我怎么能有这样的东西：

<input class="myClass" id="a" type="checkbox" other="x"/>
<input class="myClass" id="b" type="checkbox" other="x"/>
<input class="myClass" id="c" type="checkbox" other="x"/>
<input class="myClass" id="d" type="checkbox" other="y"/>
<input class="myClass" id="e" type="checkbox" other="z"/>

我可以检索元素 a 到 e，添加一个单击事件，并且我想在属性other（x、y 和 z）中定义的元素上添加一个事件。
我该怎么做？
我尝试：

$(".myClass").each( function() {
    $("#" + $(this).attr("other")).click( function() {
        ...
    });
});

但是三个元素有other="x"，所以事件是在 x 上添加三个时间，我只想要一个。

Answer 1

试试这个，我在绑定新事件之前取消绑定事件。JsFiddle 上的演示

$(".myClass").each( function() {
    $("#" + $(this).attr("other")).unbind('click').click(    function() {
       alert(this.id);
    });
});

Answer 2

可能有更好的方法，但您可以使用命名空间^[docs]取消绑定任何以前的这种类型的事件处理程序：

$(".myClass").each( function() {
    $("#" + $(this).attr("other")).off('click.someNS').on('click.someNS', function() {
        ...
    });
});

另一种方法是过滤元素，以便每个元素只有一个具有特定other属性：

var seen = {};

$(".myClass").filter(function() {
    var other = $(this).attr('other');
    return !seen[other] && (seen[other] = true);
}).each(...);