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?

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?

• javascript
• jquery
• html
• dynamic
• html-lists

• 1 you are trying to use a jQuery function on a native DOM object! How is that ever going to work? – Amit Commented Jul 16, 2012 at 18:04
• @Amit This isn't necessarily obvious to people new at DHTML/jQuery. – millimoose Commented Jul 16, 2012 at 18:06

5 Answers 5

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.

var sorttList = document.getElementById("list1");

That is DOM object, not jQuery and you are grabbing the child nodes which is against html node set, not a jQuery object.

jQuery("#list1 li").on("dblclick", function(){});

If using jQuery :

$("#list1").children().on('dblclick', function() {
    //some event
    //var k = $(this).index(); will get the elements index
});

or if you just have to iterate :

$.each($("#list1").children(), function(k, elm) {
    $(elm).on('dblclick', function() {
        //some event, k still refers to the index
    });
});

or just plain:

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

Your other option is just to assign a function directly to the DOM event handler:

sortList.childNodes[k].ondblclick = function(){ ... };

To avoid overwriting existing listeners:

var curr = sortlist.childNodes[k].ondblclick;
var olddblclick = curr.ondblclick;
curr.ondblclick = function(e){
                     if(olddblclick) olddblclick.call(curr,e);
                     // code for new evt listener here
                  };

The correct way is probably to add the event on the parent. You're adding the same event on all the children, how is that good? Using jQuery:

$( '#list1' ).on( 'dblclick', function() {
});

// If you want to reduce to "li" elements only:
$( '#list1' ).on( 'dblclick', 'li', function() {
});

If you're just using plain javascript, I guess you don't care about browser patibility. Here is how to do it then:

document.getElementById( 'list1' ).addEventListener( 'dblclick',
    function( e ) {
    if ( e.target.tagName === 'LI' ) {
        // you clicked a LI element
    }
});

Just for your information, bind is an (old) function of jQuery to bind events. It is available on jQuery objects. Not DOM elements (what getElementById returns). It is also another function available since ES5 (javascript standard) in Function.prototype. You can call it on functions, not on DOM elements, as your error shows :-).