Jquery .each() not working in chrome

Question

I am using the Jquery Elastic. It works fine with Firefox but fails in chrome. I have only one textarea I am using it on.

HTML:

<textarea id = "tarea">Lorem Ipsum</textarea>

Binding the textarea with the plugin function:

$(document).load(function() { $('#tarea').elastic() ;  }) ;

I opened the plugin file and found through alert statements where the execution stops in chrome:

--- code above this initializing arrays, works fine in both FF and chrome
    return this.each( function() {
                 -- Chrome does not execute anything in the callback
                // Elastic only works on textareas
                if ( this.type !== 'textarea' ) {
                 
                    return false;
                }
       .
       .
       .
                } 
   --- return ends here , chrome does not execute anything here either.

I have checked the JS for error with firebug and found nothing. I have a similar plugin for chrome as well and even that does not report any javascript errors.

Update :

I changed the call to the plug from being a 'load' event to a 'ready' event. And it works now. I can't understand why though.

If it's not getting anything in the callback, because there's nothing in '`this`' to '`each`', before the line `.each()`, `alert( this.length );` and check if `this` is definitely an `typeof jQuery` object, otherwise you might need to re-wrap it, `jQuery(this)`. — MackieeE, Oct 17 '13 at 11:18
`this` is a DOMnode (which doesn’t have a property `type`) and thus the function returns right there once the check against `'textarea'` fails? — tobi, Oct 17 '13 at 11:49
@ tobi It doesn't go to the callback. The check is never performed. @ Mackieee alert(this.length); returns 0. The typeof returns 'object'. I wrapped it with jquery as well but it did not help. — Varun Jain, Oct 17 '13 at 13:02
@tobi `this` should be a DOM node that represents an input, and **does** have a property of `type`. — Anthony Grist, Oct 17 '13 at 13:56
From the doc for the load-event: " This event can be sent to any element associated with a URL: images, scripts, frames, iframes, and the window object." I suspect trying to call `$(document).load(function() {...});` just immediately executes the callback, and therefore doesn't work to delay execution until the elements exist. That would explain why switching to `.ready()` did work for you. — Anthony Grist, Oct 17 '13 at 13:57
there is no document load, there is window load, window unload and document ready in jquery — ZiTAL, Oct 17 '13 at 14:07

Bravo Yeung · Answer 1 · 2019-04-26T09:30:36.733

Note: For Chrome, do not expect $ is always JQuery.

You can put $ into console to check if it returns ƒ $(selector, [startNode]) { [Command Line API] }, if yes means $ is not defined for JQuery.

That's a good news that you have below ways to try:

Solve the conflict of using $, let it be jQuery without any ambiguity

Firstly, you can put this code snippet

var jq = document.createElement('script');
jq.src = "https://code.jquery.com/jquery-3.3.1.min.js";  /* Include any online jquery library you need */
document.getElementsByTagName('head')[0].appendChild(jq);

into the Console, then put $.noConflict into console, if it not returns undefined, but returns ƒ (t){return e.$===w&&(e.$=Kt),t&&e.jQuery===w&&(e.jQuery=Jt),w}, it means $ is not defined for JQuery now.

Next you can continue to input your regional code, then you will find it works well now.

Refer: https://blog.wplauncher.com/run-jquery-in-chrome-console/

Using .js file instead in Chrome, then debug the JavaScript file.

Refer: Chrome DevTools Snippets

Besides, for some specific version of Chrome, there is a option in UI to set the page context (probably removed this function in latest version!)

.

Refer:

https://stackoverflow.com/a/8581276/6075331, https://stackoverflow.com/a/15197993/6075331

Jquery .each() not working in chrome

1 Answers1