jQuery绑定dblclick事件到多个元素

Question

I am attempting to bind a dblclick event to divs in a nodeList which I am iterating through. Here is the code:

var elems = document.getElementsByClassName("click");
currentLocation = elems[0].id;
for (var i=0; i<elems.length; i++){
    $(elems[i]).dblclick(function() {
            if((elems[i].id) != currentLocation){
                badAnswer = true;
                alert(badAnswer);
            }
        });

    }

currentLocation is a global variable set to the first element id of the node list. badAnswer is also a global boolean set to false. If a element is double clicked that matches an element other than the currentLocation global, badAnswer is set to true.

Currently I receive a undefined error, which I tried to remedy by creating a local variable inside of the event handler. This didn't seem to work either and badAnswer is always true on double click as the elementID is always equal to the ID value of the last element.

Is there a better way to do this?

Answer 1

Yes, there is a much better way:

var currentLocation = $(".click")[0].id;
$(".click").on("dblclick", function() {
    if (this.id != currentLocation) {
        badAnswer = true;
    }
});

Answer 2

$('.click').dblClick(function() {
    if(this.id != currentLocation) {
        ...
    }
});

You're already using jQuery so you might as well use the selectors...much easier!