Why can't I convert a normal variable to a jQuery object in v3?

Question

We just upgraded our jQuery version from v1.7 to v3.4.1. We have code which passes a jQuery object (which doesn't yet exist in the DOM, and I'm guessing is the root cause of this problem) to a function. However, when attempting to handle this newly created variable, it only returns the root jQuery function itself: jQuery.fn.init {}

This SO answer helped me realize the issue: Help understanding jQuery's jQuery.fn.init Why is init in fn

Actual Snippet:

create: function (params) {
        console.log('params.target:', params.target);
        var $target, id;

        if (_.isString(params.target)) {
            if (params.target.charAt(0) === '#') {
                $target = $('#send-to-friend-dialog');
                console.log('$target1: ', $target);
            } else {
                $target = $('#' + params.target);
            }
        } else if (params.target instanceof jQuery) {
            $target = params.target;
        } else {
            $target = $('#dialog-container');
        }

        console.log('$target.length: ', $target.length)

        // if no element found, create one
        if ($target.length === 0) {
            console.log('$target2 : ', $target);
            if ($target.selector && $target.selector.charAt(0) === '#') {
                id = $target.selector.substr(1);
                $target = $('<div>').attr('id', id).addClass('dialog-content').appendTo('body');
            }
        }

        // create the dialog
        console.log('$target3: ', $target);
        this.$container = $target;
        this.$container.dialog($.extend(true, {}, this.settings, params.options || {}));
        return this.$container;
    },

Output in v1.12.4: https://i.stack.imgur.com/DkPtx.png

Output in v3.4.1: https://i.stack.imgur.com/2PgWR.png

So while it is defined, the object itself is a very different output in both versions and I'm wondering why?

Thank you!

"When I reference $string later in my code, it".... what is the rest of the sentence? — epascarello, Jul 17 '19 at 22:42
Can you show a snipplet that demonstrates what is broken? What worked before and is not working now? — epascarello, Jul 17 '19 at 22:43
If `$string.length` is `0`, then the variable is not undefined. If it's undefined later, there's a problem with the code in between, which you haven't shown. — Barmar, Jul 17 '19 at 22:51
Is it possible it's out of scope when you reference it? I just ran it with 3.3.1 and it's defined. — Tyddlywink, Jul 17 '19 at 22:54
In general, you shouldn't worry about how a JQuery object is printed in the console, that's an internal design detail. — Barmar, Jul 17 '19 at 22:55
Please post some actual application code that isn't working in v3. — Barmar, Jul 17 '19 at 22:56
@Barmar I've updated the question with the actual code. Thanks! — Nick Arocho, Jul 17 '19 at 23:10

score 1 · Accepted Answer · answered Jul 17 '19 at 23:16

The jQuery .selector property was deprecated in 1.7, and removed in 3.0. See https://api.jquery.com/selector/. This was an internal interface, not intended to be used by applications.

You'll need to redesign your code so it doesn't need this. The documentation suggests an alternative:

For example, a "foo" plugin could be written as $.fn.foo = function( selector, options ) { /* plugin code goes here */ };, and the person using the plugin would write $( "div.bar" ).foo( "div.bar", {dog: "bark"} ); with the "div.bar" selector repeated as the first argument of .foo().

You are very right, sir. I didn't even think to check the `.selector` property. Thank you so much! — Nick Arocho, Jul 18 '19 at 03:11

Why can't I convert a normal variable to a jQuery object in v3?

1 Answers1