Dynamically loaded jQuery not finding class

Question

I have the following code which loads jQuery into the page dynamically after page load and then attempts to run some jQuery of its own afterwards. The first console log of the page title works. The issue comes when it cant find the class "special-div" later on in the page and replace it with the appropriate text. Any thoughts?

//Load jQuery library using plain JavaScript
(function(){
    var newscript = document.createElement('script');
    newscript.type = 'text/javascript';
    newscript.src = 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js';
document.getElementsByTagName('head')[0].appendChild(newscript);

// Poll for jQuery to come into existance
var checkReady = function(callback) {
    if (window.jQuery) {
        callback(jQuery);
    }
    else {
        window.setTimeout(function() { checkReady(callback); }, 100);
    }
};

// Start polling...
checkReady(function($) {
    console.log( 'jQuery is loaded on: ' + $('title').text() );
    $( '.special-div' ).each(function( index ) {
        console.log( index + ": " + $( this ).text() );
        $( this ).replaceWith( "Say something here " + $( this ).attr( "id" ) + ' ' + $( this ).attr( "title" ) );
        });
    });
})();

The HTML looks like this:

<div id="something" class="special-div" title="else">&nbsp;</div>

The wacky CMS that I am working on only allows for me to paste in one external javascript file so i have to load in jQuery and all other scripts i need through that one file.

Edit:

so i ran a few additional tests and tried this:

console.log( 'jQuery is loaded on: ' + $( '.special-div' ).attr( "id" ) );

the response i am getting is:

jQuery is loaded on: undefined

The code works as-is, but the div is deleted by the call to replaceWith. Are you trying to refer to .special-div after that? — Rick Hitchcock
– Rick Hitchcock, Commented Mar 30, 2015 at 14:45
nope. in th page i am working on the code does nothing and the console log for the each index never happens. — dpegasusm
– dpegasusm, Commented Mar 30, 2015 at 14:51

3y3skill3r · Accepted Answer · 2015-03-30 14:38:39Z

0

If you want to return content of div in second console.log, use $( this ).html() instead of $( this ).text()

answered Mar 30, 2015 at 14:38

3y3skill3r

1,0261 gold badge14 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

F2K · Accepted Answer · 2015-03-30 14:50:52Z

0

If you want to replace text for each $( '.special-div' ) with the content of their attributes, you have to do:

$( this ).replaceWith( "Say something here " + $( this ).attr( "id" ) + ' ' + $( this ).attr( "title" ) );

instead of

$( '.special-div' ).replaceWith( "Say something here " + $( this ).attr( "id" ) + ' ' + $( this ).attr( "title" ) );

otherwise you get the same replacement for all occurrences.

answered Mar 30, 2015 at 14:50

F2K

4814 silver badges11 bronze badges

2 Comments

dpegasusm Over a year ago

Thanks i have made that change but still nothing. I edited the original with some more information.

F2K Over a year ago

Using the code as-is I get the right output, have you any other JS error in browser console (Firebug, Chrome Inspector or whatever)?

usp · Accepted Answer · 2015-03-30 15:13:24Z

0

I tried it and it works.
But if you are putting it in <head> and another jQuery is loaded before it, DOM searching will run before the DOM getting ready so that it can not find the DOM.
(case of no window.setTimeout(function() { checkReady(callback); }, 100);)
(another CMS plugin might load jQuery)

So it could be better to run the script on kind of window.onload timings.
Or putting it on the end of <body> may also work.

edited Mar 30, 2015 at 15:13

answered Mar 30, 2015 at 14:54

usp

943 bronze badges

Collectives™ on Stack Overflow

Dynamically loaded jQuery not finding class

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related