Question

I’m trying to modify the ‘attr’ function in the jQuery (V.6.1) core.

I have a plugins.js file that’s included in the page after the jquery-6.1.js file. The plugins.js file contains improvments made to various jQuery core functions to accomodate some SVG functionality.

I’ve copied the attr function into the plugins.js file without modifying it, but it now produces a JavaScript error when it’s called.

Does anyone know why this particular function doesn’t like to be overwritten (I’m probably overwriting it in the wrong fashion):

(function($){

    $.fn.attr = function( elem, name, value, pass ){

        var nType = elem.nodeType;

        // don't get/set attributes on text, comment and attribute nodes
        if ( !elem || nType === 3 || nType === 8 || nType === 2 ) {
            return undefined;
        }

        if ( pass && name in jQuery.attrFn ) {
            return jQuery( elem )[ name ]( value );
        }

        // Fallback to prop when attributes are not supported
        if ( !("getAttribute" in elem) ) {
            return jQuery.prop( elem, name, value );
        }

        var ret, hooks,
            notxml = nType !== 1 || !jQuery.isXMLDoc( elem );

        // Normalize the name if needed
        name = notxml && jQuery.attrFix[ name ] || name;

        hooks = jQuery.attrHooks[ name ];

        if ( !hooks ) {

            // Use boolHook for boolean attributes
            if ( rboolean.test( name ) &&
                (typeof value === "boolean" || value === undefined || value.toLowerCase() === name.toLowerCase()) ) {
                hooks = boolHook;

            // Use formHook for forms and if the name contains certain characters
            } else if ( formHook && (jQuery.nodeName( elem, "form" ) || rinvalidChar.test( name )) ) {
                hooks = formHook;
            }

        }

        if ( value !== undefined ) {

            if ( value === null ) {
                jQuery.removeAttr( elem, name );
                return undefined;

            } else if ( hooks && "set" in hooks && notxml && (ret = hooks.set( elem, value, name )) !== undefined ) {
                return ret;

            } else {
                elem.setAttribute( name, "" + value );
                return value;
            }

        } else if ( hooks && "get" in hooks && notxml ) {

            return hooks.get( elem, name );

        } else {

            ret = elem.getAttribute( name );

            // Non-existent attributes return null, we normalize to undefined
            return ret === null ?
                undefined :
                ret;
        }

    };

})(jQuery);

Answer 1

Instead of completely overwriting the base attr function, just extend it like this:

(function($){
    var jqAttr = $.fn.attr;
    $.fn.attr = function( elem, name, value, pass ) {
        // check to see if it's the special case you're looking for
        if (name === 'transform') {
            // handle your special SVG case here
        } else {
            jqAttr(elem, name, value, pass);
        }
    };
}(jQuery));

I did something similar to this to override $.each to provide some custom functionality. I’m not sure if this will fix the bug you’re having, but it is a better way to add a minor custom change in functionality instead of having to copy/paste the entire method to make one change. This method also allows the base jQuery library to change without affecting your customization.