CODEWITHSUNDEEP
javascriptjquery
Abraham P
Abraham P

Reputation: 15471

Object does not support this property or method for function defined on jQuery prototype

I am building an IE shim for various tidbits of functionality that sane browsers provide out of the box (unfortunately, I am in a position where IE7 support is mandatory).

I've got the following method definition defined on the jQuery prototype:

    $.fn.textWidth = function(){
         //some logic in here
    }

    shimSelect = function(selector){
       $(selector).on('focus', function(){
            $(this).each(function(index, element){
                   if(element.textWidth() > element.width){
                        //more logic
                   }
            }
        }
     }

     if (!$.support.leadingWhitespace) {
         $(function() {
             shimSelect("");
         });
     }

By judiciously adding various console.logs, I have established that directly before the call to textWidth the element is an HTMLElement(specifically and HTMLSelectElement) in my case.

However, it refuses to call textWidth(), failing with Object does not support this property or method in IE and with

    Uncaught TypeError: Object #<HTMLSelectElement> has no method 'textWidth' shim.js:104
        (anonymous function) togo_ie_shim.js:104
        jQuery.extend.each jquery.js:612
        jQuery.fn.jQuery.each jquery.js:242
        (anonymous function) togo_ie_shim.js:103
        jQuery.event.dispatch jquery.js:3064
        elemData.handle.eventHandle

on Chrome

My questions are, what is wrong with my code? Why is it failing? And how can I implement a similiar shim correctly?

Upvotes: 0

Views: 900

Answers (1)

loxxy
loxxy

Reputation: 13151

The each function does not give you the jquery object as argument, it's a DOM object.

jQuery.each( collection, callback(indexInArray, valueOfElement) )

You have extended the jquery object, hence, element has no function textWidth defined on it.

Try using : $(element) instead.

Upvotes: 1

Related Questions