I have some javascript code on my webpage that is loading some divs onto the page. I also want to add onmouseenter, and onmouseleave event handlers to each div. I am using jquery to add these handlers, but i get the error:

"Property '$' of object [object DOMWindow] is not a function"

My code looks like this, it is in a for loop:

var newItem = document.createElement('div');
newItem.innerHTML = results[i];
newItem.setAttribute("id", "resultDiv_" + i.toString());
dropDown.appendChild(newItem);

//Error on next line...
$("resultDiv_" + i.toString()).bind("mouseenter", function() {
    $("resultDiv_" + i.toString()).css({ 'background-color': 'blue' });
});

Does anyone have any ideas why i am getting this error, or even what the error means?

I have some javascript code on my webpage that is loading some divs onto the page. I also want to add onmouseenter, and onmouseleave event handlers to each div. I am using jquery to add these handlers, but i get the error:

"Property '$' of object [object DOMWindow] is not a function"

My code looks like this, it is in a for loop:

var newItem = document.createElement('div');
newItem.innerHTML = results[i];
newItem.setAttribute("id", "resultDiv_" + i.toString());
dropDown.appendChild(newItem);

//Error on next line...
$("resultDiv_" + i.toString()).bind("mouseenter", function() {
    $("resultDiv_" + i.toString()).css({ 'background-color': 'blue' });
});

Does anyone have any ideas why i am getting this error, or even what the error means?

• javascript
• jquery

• just curious, where did you put this block of code that uses $ (jquery)? – jerjer Commented Oct 22, 2009 at 13:34
• it is inside a function that fires as a result of a webMethod returning results[]...which is initiated as a result of a keyup event in a textbox... :D – Pavol Commented Oct 22, 2009 at 13:37
• do you use other other javascripts(framework perhaps), you might as well try using jquery.noconflict – jerjer Commented Oct 22, 2009 at 13:40
• where would i add jquery.noconflict? i don't quite understand what the documentation is saying – Pavol Commented Oct 22, 2009 at 13:49
• 1 for instance var J = jQuery.noConflict(); you can now use J as J("resultDiv_" + i.toString()) instead of $. – jerjer Commented Oct 22, 2009 at 13:53

5 Answers 5

Try replacing all occurrences of $ with jQuery.

Also the selector $("resultDiv_" + i.toString()) won't likely return any elements. You probably meant: $("#resultDiv_" + i.toString())

And finally make sure this code is executed when the DOM is ready i.e. inside:

jQuery(function() {
    // Put your code here
});

Are you sure that jQuery is properly loaded? Could it be a conflict with another javascript library?

(function ($) {
    // All your code here
})(jQuery);

This fixed the problem for me.

What about trying this?

      var newItem = document.createElement('div');
        newItem.innerHTML = results[i];
        newItem.setAttribute("id", "resultDiv_" + i.toString());
        dropDown.appendChild(newItem);

        //Error on next line...
        $("resultDiv_" + i.toString()).mouseenter( function() {
            $("resultDiv_" + i.toString()).css({ 'background-color': 'blue' });
        });

Or make sure that $("resultDiv_" + i.toString()) is not null. Use Firebug to inspect the element.

You might as well try this:

  var newItem = jQuery('<div id="' + "resultDiv_" + i.toString() + '">+ results[i] + '</div');
  jQuery(dropDown).append(newItem);
  //Error on next line...
  newItem.mouseenter(function(){
      jQuery(this).css( 'background-color', 'blue');
  });

or perhaps jQuery.noConflict will solve this.