Question

I am trying to dynamically iterate through a list and bind each ‘li’ element with a dblclick event.

What I want is to be able to do something like the following:

var sorttList = document.getElementById("list1");
for (var k = 0; k < sorttList.childNodes.length; ++k) {
    sorttList.childNodes[k].bind('dblclick', function() {
        //some event
    });
}

When I attempt to do so, I get the error “Uncaught TypeError: Object #HTMLLIElement has no method ‘bind'”

What is the appropriate syntax for this task?

Answer 1

bind() is not part of vanilla JavaScript. Your intention is probably to use the bind() function that is part of the jQuery library.

If you are not using jQuery, you need to get it, then update your code to use jQuery selectors and to pass around jQuery objects.

If you are already including jQuery in your page, then you need to make sure that you’re calling bind() on a jQuery object. Change:

sorttList.childNodes[k].bind('dblclick', function() {

to

$(sorttList.childNodes[k]).bind('dblclick', function() {

This isn’t a perfect solution, but hopefully this will demonstrate how $() when using jQuery will return a jQuery Object, not a standard HTML element JavaScript object. The bind() method exists on a jQuery object, but not a standard DOM object like the one you’re using.