Question

How can I have something like this :

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

I can retrieve the element a to e, add a click event and I want to add an event on the element define in the attribut other (x, y and z).
How can I do it?
I try :

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

But three elements have other="x" so the event is add three time on x and I want just one.

Answer 1

There might be better ways, but you could unbind any previous event handlers of this type, using namespaces ^[docs]:

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

Another way would be to filter the elements so that you only have one of each with a certain other attribute:

var seen = {};

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